跨域常见解决方法

跨域常见解决方法

参考：
https://baijiahao.baidu.com/s?id=1726052869296463498&wfr=spider&for=pc
https://blog.csdn.net/Tyro_java/article/details/122849503
https://www.jianshu.com/p/712131277d19

一、跨域问题的由来

1 同源策略

跨域问题的产生，源自浏览器的一个同源策略。

1.1 同源策略的概念

同源策略是由 Netscape 提出的一个著名的安全策略，它是浏览器最核心也是最基本的安全功能，所有支持 JavaScript 的浏览器都会使用这个策略。在同源策略中，要求 域名、协议、端口 3部分都要相同。
举例来说http://www.yiyige.com:80/dir/syc.html 这个网址，http是协议，www.yiyige.com是域名，80是端口号。同源策略具体规则如下表

1.2 同源策略的作用

通过上一小节可知，同源策略的出现就是为了防止针对服务器的攻击，比如为了防止恶意网站通过冒充用户信息来窃取用户的敏感数据信息等，所以同源策略可以限制以下行为:

限制读取Cookie、LocalStorage 和 IndexDB等信息；
限制获取 DOM 和 JS 对象；
限制发送Ajax请求。
即这个同源策略提高了攻击成本，保证了服务器的安全。

2. 跨域问题

2.1 跨域的作用

在上面的小节中，我给大家说到，浏览器出于安全方面的考虑，做了一个同源策略的限制，即不允许跨域访问其他资源，通俗的说就是浏览器中不能跨站执行其他网站的脚本，这是浏览器对JavaScript实施的一种安全限制。

2.2 跨域的概念
比如我们现在有一个地址http://store.company.com/dir/page.html， 根据同源策略，如果对以下地址进行请求，产生的结果如下表所示:

二、跨域问题的解决方案

如果想要跨域请求访问或者管理资源，需要目标域赋予权限，到目前为止我们只说了浏览器同源策略的限制，下面我们就再说说赋予权限进行跨域访问相关的知识。

1. 跨域解决方案

1. 服务端处理
2. 客户端处理
3. 工具代理

1.1 服务端处理

CORS 全称 Cross-Origin Resource Sharing，即跨域资源共享。

CORS 是一种基于 HTTP Header 的机制，该机制通过允许服务器标示除了它自己以外的其它域。服务器端配合浏览器实现 CORS 机制，可以突破浏览器对跨域资源访问的限制，实现跨域资源请求。
CORS需要浏览器和服务器同时支持。它的通信过程，都是浏览器自动完成的，不需要用户参与。实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信。
CORS 的验证机制分两种模式：简单请求和预检请求。

1. 服务端增加如下代码，实现对访问来源的放通
   
2. 预检请求会发送两次消息：一次OPTTIONS请求，一次真正请求
   
   

因为http协议并没有跨域的概念，请求发送了就会执行，而到达了浏览器的时候，才由浏览器解析响应头，查看是否有相应的字段来决定要不要继续执行。

优点
CORS 通信与同源的 AJAX 通信没有差别，代码完全一样，容易维护。
支持所有类型的 HTTP 请求。
缺点
第一次发送非简单请求时会多一次请求，增加服务器压力。

1.2 客户端处理

JSONP : 利用<script>标签的src没有跨域限制来完成的

执行过程：

1. 前端定义一个解析函数(如: jsonpCallback = function (res) {})
2. 通过params的形式包装script标签的请求参数，并且声明执行函数(如cb=jsonpCallback)
3. 后端获取到前端声明的执行函数(jsonpCallback)，并以带上参数且调用执行函数的方式传递给前端
4. 前端在script标签返回资源的时候就会去执行jsonpCallback并通过回调函数的方式拿到数据了。

引自 https://www.jianshu.com/p/88bb82718517

优点
兼容性好，现在主流的跨域解决方案之一
缺点
只支持get
要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给 script 标签新增了一个 onerror 事件处理程序，但是存在兼容性问题

1.3 工具代理

在nginx配置反向代理，在www.siam.com 下某个路径代理到 www.siam2.com 即可。

通过反向代理，我们就可以通过www.siam.com/apis/index2.php 这个路径来访问原来部署在 www.siam2.com 下的内容。
这样子就是同源请求了。