常用的跨域解决方案

浏览器出于安全问题的考虑，采用了同源策略：不能获取其他域名（包括端口）下面的限制 ，通常指的是运行web的服务器和请求目标数据的服务器不同源（比如运行在127.0.0.1:80的web服务想要通过ajax来获取127.0.0.1:8090的数据）。

 

实际实现：

浏览器会发送请求，但接收返回内容时没有看到Access-Control-Allow-Origin， 浏览器 就将返回的内容忽略掉且报错。

 

常用解决方案：

• CORS：

1. 简单请求：

浏览器默认在请求头信息中增加Origin字段，跨域后的服务器根据这个值决定是否同意这次请求：

服务器不同意：返回一个正常的HTTP回应，不包含Access-Control-Allow-Origin（注意：状态码可能依旧为200）；

服务器同意：在返回请求头中加入Access-Control-Allow-Origin，其他几个相关的头字段：

Access-Control-Allow-Origin: http://XXX (要么是Origin字段的值，要么是*表示接收任意域名)
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar

请求带Cookies和HTTP认证信息需要：

前端：ajax请求时设置XMLHttpRequest对象的withCredentials属性为true；

后端：返回请求头中添加 Access-Control-Allow-Credentials: true

2. 非简单请求

略。。。

 

• JSONP方法：

将请求url动态拼接成引用外部js文件的方式。

<script>
    function fn(data) {
        alert(data);
    }
</script>
<!--当作js文件来加载。
通常：在2.txt中常调用回调函数:fn([...])，
    或在src中定义获取数据后的回调:src="http:...&calllback=fn"-->
<script src="http://127.0.0.1:8887/2.txt">
  // 以下的写法会报错，抛弃
  // var xhr = new XMLHttpRequest()
  // xhr.open('GET', 'http://127.0.0.1:8887/2.txt')
  // xhr.send()
</script>

 

• 浏览器关闭同源策略

如果是开发调试环境，还可以采用关闭chrome浏览器同源策略的方式来暂时方便开发。

方法：在命令行打开浏览器时，浏览器地址后加上后缀：

 “--disable-web-security --user-data-dir"

或在快捷方式中右键属性，目标框中chrome浏览器的目录后，加以上后缀且以空格隔开，如下图：

 以后打开的chrome浏览器会弹出以下提示，忽略即可

 

参考自：

http://www.ruanyifeng.com/blog/2016/04/cors.html

https://www.cnblogs.com/LO-ME/p/7515393.html