前端解决ajax跨域有哪些方法（5分钟彻底搞懂ajax跨域问题）
前端解决ajax跨域有哪些方法（5分钟彻底搞懂ajax跨域问题）2）不能访问对方的DOM1）不能访问对方的数据（cookies、LocalStorage和IndexDB）跨域问题来源于浏览器的“同源策略”(Same-origin policy)，即浏览器为了安全，会对“不同源”的网页请求做出如下限制：
【写在最前】
我们在平时的编程学习中，经常会接触到“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站用户就可以冒充银行用户在银行网站为所欲为了。
同源策略的限制是必需的，但是有时合理正常的使用也受影响，很不方便。
比如：一个大网站有很多子域名的情况，这些子域名之间的数据通信也会因此策略而不能正常交互。
常见报错信息如下：
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请求） 等方案，对业务代码侵入性都很大，性价比不高，所以此处均一笔带过，不再详细介绍。
【全文完】
十年技术沉淀，只做原创文章；
及时关注作者，成就大牛之路！
