0分享至
用扫码二维码
分享至好友和朋友圈
【写在最前】
我们在平时的编程学习中，经常会接触到“ajax跨域”这个概念；
但是很多小白只知其然，不知其所以然，甚至是在查阅了很多资料之后仍然是云山雾罩。
通过本文知识，让我们花5分钟时间彻底搞懂它，相信聪明的你，看完一定会有收获！
# 为什么会有跨域问题？
跨域问题来源于浏览器的“同源策略”(Same-origin policy)，即浏览器为了安全，会对“不同源”的网页请求做出如下限制：
1）不能访问对方的数据（cookies、LocalStorage和IndexDB）
2）不能访问对方的DOM
3）不能向对方发送AJAX请求
同源的定义：“协议+域名+端口” 三者必须完全一致才算同源，否则就属于“不同源”。假设：:8000/test.html那么：* :8000/test2.html属于同源* :8000/test.html属于不同源（因为协议不同）* :8000/test.html属于不同源（因为域名不同）* :8001/test.html 属于不同源（因为端口不同）# 为什么浏览器要执行同源策略？
“同源策略”是浏览器安全的基石，主要目的是为了保护用户数据安全。
假设一下，如果没有同源策略，当浏览器在访问一个银行网站的同时还在访问另一个网站B，如果银行网站把session保存在cookies中，而B又能随便读取cookie数据，那么B站用户就可以冒充银行用户在银行网站为所欲为了。
# ajax跨域解决方案
同源策略的限制是必需的，但是有时合理正常的使用也受影响，很不方便。
比如：一个大网站有很多子域名的情况，这些子域名之间的数据通信也会因此策略而不能正常交互。
常见报错信息如下：No Access-Control-Allow-Origin header is present on the requested resource. Originis therefore not allowed access.常用解决方案：
方案1：CORS 跨源资源共享（Cross-Origin Resource Sharing）（推荐）
CORS是W3C标准，也是解决AJAX跨域请求的标准解决方法。其实从AJAX跨域请求返回的错误信息里，已经暗示了服务器端没有配置支持跨源资源共享。
CORS需要浏览器和服务器同时支持。目前，所有现代浏览器都支持该功能，IE浏览器需要IE9+。
整个CORS通信过程，都是浏览器自动完成，不需要用户人工参与。
具体流程如下：
1）浏览器发现本次请求是AJAX跨源请求，就会在请求头中自动添加： Origin:，表明本次请求来自哪个源（协议 + 域名 + 端口）
2）服务器根据请求头中的 Origin 值，决定是否同意这次请求。
a)如果 Origin不在许可范围内，服务器会返回一个正常的HTTP回应。
当浏览器发现回应头中没有包含Access-Control-Allow-Origin字段时，则会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。
特别注意:这种错误无法通过HTTP状态码(status code)识别，因为HTTP回应的状态码是正常的200。
b)如果Origin 在许可返回，则服务器会在响应头中下发 Access-Control-Allow-Origin: ，此时双方即可正常通信
服务器端，一般都是用全局过滤器来处理跨域请求，从而实现“对业务代码零侵入”
以java 语言为例：@Overridepublic 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 :8080;方案3: 关闭浏览器的同源策略
既然是本地浏览器的策略，那么我禁掉策略就好啦
特别注意：这种方案仅仅适用于本地临时调试，且各浏览器设置方法不同以Chrome浏览器为例说明：
启动Chorme时添加如下参数：
chrome --disable-web-security --user-data-dir另外，还有 WebSocket、JSONP（只支持GET请求） 等方案，对业务代码侵入性都很大，性价比不高，所以此处均一笔带过，不再详细介绍。
【全文完】
十年技术沉淀，只做原创文章；
及时关注作者，成就大牛之路！
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
/阅读下一篇/ 返回网易首页 下载网易新闻客户端