一秒钟教会你如何处理跨域问题

什么是跨域

正常情况下，我们使用ajax请求的数据都在自己的服务器上。但在一些特定的场景中，我们需要获取到别人的服务器上的数据，也就是在自己的服务器中的ajax要请求到别人的服务器的网址，这就是跨域。但是浏览器是不允许这样操作的，因为浏览器有同源策略。

同源策略是浏览器的一项安全策略，浏览器只允许js 代码请求和当前所在服务器域名,端口,协议相同的接口数据的数据,这就是同源策略.

当发送ajax请求时,协议、域名、端口任意一个不相同时，都会产生跨域问题

1.JSONP跨域

浏览器的同源策略没有限制html的标签属性，JSONP跨域的解决方案的原理就是利用html签的属性不受同源策略限制，而完成跨域请求。 JSONP跨域方式主要是利用script标签的src属性完成，因为script标签请求回来的数据会被当做js代码解析。但是JSONP请求也有自身的 局限性，就是只能做get请求，如果数据量较大的话，JSONP就不太适用了。

利用标签可以跨域（当前网页的图片链接可以是别的网站上的图片）的特性，制作标签进行跨域； js代码:

var script=document.createElement('script');
script.setAttribute('src',"http://www.php.com/test.php?callback=response");
$('head').append(script);
function response(res){
    $('#result').text(res);
    script.parentNode.removeChild(script); // 执行完成后将这个标签删掉
}

php代码:

$fun=$_GET['callback'];
echo "$fun(".$str.")";

2.服务器代理 - proxy方式

服务器没有同源限制。利用服务器没有同源限制的原理，请求当前服务器的一个路径，后让当前服务器代替自己请求数据，再将数据返回给自己 1.可以让服务器的后台语言代替自己请求 也就是说跨域请求只是限制客户端向服务端，如果是服务端向服务端请求的话就不存在这个问题，也就是说需要跨域的请求交给php服务端来做，有了结果再响应给ajax即可。

2.可以在服务器的配置文件中，设置代理

使用服务器代理(nginx)，在nginx配置文件中配置代理，具体配置如下：

devServer: {
proxy: {
'/api': {
target: "http://12.18.123.121",//代理服务器地址
changeOrigin: true,  //是否跨域
},
},
},

3.cors方法

后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错

在服务端设置响应头，允许跨域请求如果请求的服务端是自己可操作的话， 可以在php端设置允许跨域的响应头。代码如下：

header("Access-Control-Allow-Origin:*");

注意： 在一个项目使用多个域名的时候，可以使用这种方式来跨域 - 因为这种方式必须是自己能操作到目标文件才行