【写在最前】

我们在平时的编程学习中，经常会接触到“ajax跨域”这个概念；

但是很多小白只知其然，不知其所以然，甚至是在查阅了很多资料之后仍然是云山雾罩。

通过本文知识，让我们花5分钟时间彻底搞懂它，相信聪明的你，看完一定会有收获！

# 为什么会有跨域问题？

跨域问题来源于浏览器的“同源策略”(Same-origin policy)，即浏览器为了安全，会对“不同源”的网页请求做出如下限制：

1）不能访问对方的数据（cookies、LocalStorage和IndexDB）

2）不能访问对方的DOM

3）不能向对方发送AJAX请求

同源的定义：

“协议+域名+端口” 三者必须完全一致才算同源，否则就属于“不同源”。

假设： http://www.example.com:8000/test.html

那么：

* http://www.example.com:8000/test2.html 属于同源

* https://www.example.com:8000/test.html 属于不同源（因为协议不同）

* http://www.example.cn:8000/test.html 属于不同源（因为域名不同）

* http://www.example.com:8001/test.html 属于不同源（因为端口不同）

# 为什么浏览器要执行同源策略？

“同源策略”是浏览器安全的基石，主要目的是为了保护用户数据安全。

假设一下，如果没有同源策略，当浏览器在访问一个银行网站的同时还在访问另一个网站B，如果银行网站把session保存在cookies中，而B又能随便读取cookie数据，那么B站用户就可以冒充银行用户在银行网站为所欲为了。

# ajax跨域解决方案

同源策略的限制是必需的，但是有时合理正常的使用也受影响，很不方便。

比如：一个大网站有很多子域名的情况，这些子域名之间的数据通信也会因此策略而不能正常交互。

常见报错信息如下：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.xxx.com' is therefore not allowed access.

常用解决方案：

方案1：CORS 跨源资源共享（Cross-Origin Resource Sharing）（推荐）

CORS是W3C标准，也是解决AJAX跨域请求的标准解决方法。其实从AJAX跨域请求返回的错误信息里，已经暗示了服务器端没有配置支持跨源资源共享。

CORS需要浏览器和服务器同时支持。目前，所有现代浏览器都支持该功能，IE浏览器需要IE9+。

整个CORS通信过程，都是浏览器自动完成，不需要用户人工参与。

具体流程如下：

1）浏览器发现本次请求是AJAX跨源请求，就会在请求头中自动添加： Origin: http://www.xxx.com ，表明本次请求来自哪个源（协议 + 域名 + 端口）

2）服务器根据请求头中的 Origin 值，决定是否同意这次请求。

a)如果 Origin不在许可范围内，服务器会返回一个正常的HTTP回应。

当浏览器发现回应头中没有包含Access-Control-Allow-Origin字段时，则会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

特别注意:这种错误无法通过HTTP状态码(status code)识别，因为HTTP回应的状态码是正常的200。

b)如果Origin 在许可返回，则服务器会在响应头中下发 Access-Control-Allow-Origin: http://www.xxx.com，此时双方即可正常通信

服务器端，一般都是用全局过滤器来处理跨域请求，从而实现“对业务代码零侵入”

以java 语言为例：

@Override

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Headers", "*");

response.setHeader("Access-Control-Allow-Credentials", "true");

filterChain.doFilter(servletRequest, response);

return;

}

方案2：架设代理服务器

原理：把发往其他域的请求，发给自己的代理服务器，代理服务器完成请求后，将响应数据返回给原始请求，本质是绕开了浏览器的“同源策略”

一个 nginx 代理服务器的配置例子：

server {

listen 8001;

location / {

root "D:/programs/Tomcat 8.5/webapps/ROOT";

}

location ^~ /HelloWorld {

proxy_pass http://test2.kuayutest.com:8080;

}

}

方案3: 关闭浏览器的同源策略

既然是本地浏览器的策略，那么我禁掉策略就好啦

特别注意：这种方案仅仅适用于本地临时调试，且各浏览器设置方法不同

以Chrome浏览器为例说明：

启动Chorme时添加如下参数：

chrome --disable-web-security --user-data-dir

另外，还有 WebSocket、JSONP（只支持GET请求） 等方案，对业务代码侵入性都很大，性价比不高，所以此处均一笔带过，不再详细介绍。

【全文完】

十年技术沉淀，只做原创文章；

及时关注作者，成就大牛之路！