浅谈解决前端跨域的两个方法

在前端开发中在使用Ajax调用后端接口的时候经常会遇到跨域的问题,导致不能拿到后端接口返回的数据.下面我们来看看解决跨域的几个方法.
在解决跨域问题的前,我们先来了解一下什么是跨域,跨域:即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域.相反,不跨域即叫同源,同源:即协议头、域名、端口完全一致就叫同源;

如：(http://www.example.com/detail.html) 与以下地址对比
http://api.example.com/detail.html | 不同源 | 域名不同 |
https://www.example.com/detail.html | 不同源 | 协议不同 |
http://www.example.com:8080/detail.html | 不同源 | 端口不同
http://api.example.com:8080/detail.html | 不同源 | 域名、端口不同
https://api.example.com/detail.html | 不同源 | 协议、域名不同
https://www.example.com:8080/detail.html | 不同源 | 端口、协议不同
http://www.example.com/other.html | 同源 | 只是目录不同 |

控制台常见的跨域报错

1524476169312.png

这个报错的原理是浏览器自身从安全角度考虑,不允许跨域访问.
我们解决跨域的问题就可以从以上问题对症下药.

1.通过使用Jsonp解决跨域问题.
JSONP：即JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧方案。
我们知道使用img标签,link标签,script标签的src属性是可以访问网络上的资源的,如访问线上图片,使用CDN等.但是img和link的src属性没办法拿到响应体,也就是拿不到数据,script可以拿到响应体所以我们可以通过script这个标签来解决跨域的问题.如:

<script>
    function test(json) {
        console.log('我被调用了');
        console.log(json);
    }
</script>
<script src="http://api.douban.com/v2/movie/top250?callback=test"></script>

F12打开控制台,我们可以看到 捕获.PNG

我们可以看到，我们预先定义了一个函数叫test，再然后在src里加了一个参数callback=test，可以发现，当请求完成，会自动调用test这个函数，并且把响应体（JSON数据）当做参数传递过来.实际上是浏览器用script的src去发起请求，并且传递一个参数叫callback=函数名，服务器接收到这个函数名，在返回的响应体里面调用这个函数，并且把json当做参数传递.
注意:(1).Jsonp不是一套新技术，只是聪明的程序员想出的一套方案
(2)能不能用这套方案，要看服务器端代码怎么写，服务器端如果写了调用函数的代码，那么就能支持JSONP方案.
如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;

22.PNG

2.使用CORS解决跨域问题.
CORS:即Cross Origin Resource Share，跨域资源共享.这个是直接从服务器端解决Ajax跨域访问的问题.
我们只需要在服务端文件加上header('Access-Control-Allow-Origin: *');
如:

<?php 
    $json = array("name"=>"jack","age"=>16);
    //代表告诉浏览器，我允许任意域名访问我这个接口
    //如果写一个*，代表所有域名都可以来访问我
    // header('Access-Control-Allow-Origin: *');
    //如果写的是指定域名，代表只有这个域名可以访问
    header('Access-Control-Allow-Origin: *');
    echo json_encode($json);
?>

之前我们知道,跨域访问的问题是因为浏览器考虑到安全的问题而禁止访问,这句代码的作用就是告诉浏览器我的数据可以让所有的地址访问,不用保护我,*字符表示任何网站都可以访问.当然也可以设置制定访问的地址,把*改为你指定的地址即可,多个地址用逗号分隔;
以上如有理解不到位的,欢迎指正,谢谢!