跨域问题

ajax跨域，这应该是最全的解决方案了
ajaxcorsajax跨域前端javascript
发布于 2017-12-18 约 29 分钟
前言
从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。

个人见识有限，如有差错，请多多见谅，欢迎提出issue，另外看到这个标题，请勿喷~

题纲
关于跨域，有N种类型，本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍)，内容大概如下:

什么是ajax跨域

原理
表现(整理了一些遇到的问题以及解决方案)
如何解决ajax跨域

JSONP方式
CORS方式
代理请求方式
如何分析ajax跨域

http抓包的分析
一些示例
什么是ajax跨域
ajax跨域的原理
ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考

浏览器同源政策及其规避方法(阮一峰)

CORS请求原理
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的,只不过可能平时前端开发人员并不关心而已(所以说其实现在CORS解决方案主要是考虑后台该如何实现的问题)。

关于CORS，强烈推荐阅读
跨域资源共享 CORS 详解(阮一峰)

另外，这里也整理了一个实现原理图(简化版):

如何判断是否是简单请求?
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。只要同时满足以下两大条件，就属于简单请求。

请求方法是以下三种方法之一：HEAD,GET,POST
HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type(只限于三个值application/x-www-form-urlencoded、 multipart/form-data、text/plain)
凡是不同时满足上面两个条件，就属于非简单请求。

ajax跨域的表现
说实话，当初整理过一篇文章，然后作为了一个解决方案，但是后来发现仍然有很多人还是不会。无奈只能耗时又耗力的调试。然而就算是我来分析，也只会根据对应的表现来判断是否是跨域，因此这一点是很重要的。

ajax请求时,如果存在跨域现象,并且没有进行解决,会有如下表现:(注意，是ajax请求，请不要说为什么http请求可以，而ajax不行，因为ajax是伴随着跨域的，所以仅仅是http请求ok是不行的)

注意:具体的后端跨域配置请看题纲位置。

第一种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 404

出现这种情况的原因如下：

本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)
服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址
解决方案: 后端允许options请求

第二种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 405

这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象

解决方案: 后端关闭对应的安全配置

第三种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且status 200

这种现象和第一种和第二种有区别,这种情况下，服务器端后台允许OPTIONS请求,并且接口也允许OPTIONS请求,但是头部匹配时出现不匹配现象

比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错

解决方案: 后端增加对应的头部支持

第四种现象:heade contains multiple values ‘,’

表现现象是，后台响应的http头部信息有两个Access-Control-Allow-Origin:*

说实话，这种问题出现的主要原因就是进行跨域配置的人不了解原理，导致了重复配置，如:

常见于.net后台(一般在web.config中配置了一次origin,然后代码中又手动添加了一次origin(比如代码手动设置了返回*))
常见于.net后台(在IIS和项目的webconfig中同时设置Origin:*)
解决方案(一一对应):

建议删除代码中手动添加的*，只用项目配置中的即可
建议删除IIS下的配置*，只用项目配置中的即可
如何解决ajax跨域
一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:(注意，现在已经几乎不会再使用JSONP了，所以JSONP了解下即可)

JSONP方式解决跨域问题
jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍(实际项目中如果要使用JSONP,一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求)

实现原理
JSONP之所以能够用来解决跨域方案,主要是因为

实现流程
JSONP的实现步骤大致如下(参考了来源中的文章)

客户端网页网页通过添加一个

function addScriptTag(src) {
var script = document.createElement(‘script’);
script.setAttribute(“type”,“text/javascript”);
script.src = src;
document.body.appendChild(script);
}

window.onload = function () {
addScriptTag(‘http://example.com/ip?callback=foo’);
}

function foo(data) {
console.log('response data: ’ + JSON.stringify(data));
};

请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

服务端对应的接口在返回参数外面添加函数包裹层
foo({
“test”: “testData”
});
由于

使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)

CORS解决跨域问题
CORS的原理上文中已经介绍了，这里主要介绍的是，实际项目中，后端应该如何配置以解决问题(因为大量项目实践都是由后端进行解决的)，这里整理了一些常见的后端解决方案:

PHP后台配置
PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:

第一步:配置Php 后台允许跨域

NetWork->XHR，然后找到刚才的ajax请求，点进去 示例一(正常的ajax请求) 上述请求是一个正确的请求，为了方便，我把每一个头域的意思都表明了，我们可以清晰的看到，接口返回的响应头域中，包括了 Access-Control-Allow-Headers: X-Requested-With,Content-Type,Accept Access-Control-Allow-Methods: Get,Post,Put,OPTIONS Access-Control-Allow-Origin: * 所以浏览器接收到响应时，判断的是正确的请求，自然不会报错，成功的拿到了响应数据。 示例二(跨域错误的ajax请求) 为了方便，我们仍然拿上面的错误表现示例举例。 这个请求中，接口Allow里面没有包括OPTIONS，所以请求出现了跨域、 这个请求中，Access-Control-Allow-Origin: *出现了两次，导致了跨域配置没有正确配置，出现了错误。 更多跨域错误基本都是类似的，就是以上三样没有满足(Headers,Allow,Origin)，这里不再一一赘述。 示例三(与跨域无关的ajax请求) 当然，也并不是所有的ajax请求错误都与跨域有关，所以请不要混淆，比如以下: 比如这个请求，它的跨域配置没有一点问题，它出错仅仅是因为request的Accept和response的Content-Type不匹配而已。 更多 基本上都是这样去分析一个ajax请求，通过Chrome就可以知道了发送了什么数据，收到了什么数据，然后再一一比对就知道问题何在了。 写在最后的话 跨域是一个老生常谈的话题，网上也有大量跨域的资料，并且有不少精品(比如阮一峰前辈的)，但是身为一个前端人员不应该浅尝而止，故而才有了本文。 漫漫前端路，望与诸君共勉之！ 附录 招聘软广 阿里巴巴钉钉商业化团队大量hc，高薪股权。机会好，技术成长空间足，业务也有很大的发挥空间！ 还在犹豫什么，来吧！！！ 社招（P6~P7） 职责和挑战 负责钉钉工作台。工作台是帮助企业实现数字化管理和协同的门户，是拥有亿级用户量的产品。如何保障安全、稳定、性能和体验是对我们的一大挑战。 负责开放能力建设。针对纷繁的业务场景，提供合理的开放方案，既要做到深入用户场景理解并支撑业务发展，满足企业千人千面、千行千面的诉求，又要在技术上保障用户的安全、稳定和体验。需要既要有技术抽象能力、平台架构能力，又要有业务的理解和分析能力。 开放平台基础建设。保障链路的安全和稳定。同时对如何保障用户体验有持续精进的热情和追求。 职位要求 精通HTML5、CSS3、JS（ES5/ES6）等前端开发技术 掌握主流的JS库和开发框架，并深入理解其设计原理，例如React，Vue等 熟悉模块化、前端编译和构建工具，例如webpack、babel等 （加分项）了解服务端或native移动应用开发，例如nodejs、Java等 对技术有强追求，有良好的沟通能力和团队协同能力，有优秀的分析问题和解决问题的能力。 前端实习 面向2021毕业的同学 本科及以上学历，计算机相关专业 熟练掌握HTML5/CSS3/Javascript等web前端技术 熟悉至少一种常用框架，例如React、vue等 关注新事物、新技术，有较强的学习能力，有强烈求知欲和进取心 有半年以上实际项目经验，大厂加分 image.png image.png 内推邮箱 [email protected] 简历发我邮箱，必有回应，符合要求直接走内推！！！ 一对一服务，有问必答！ 也可加我微信了解更多：a546684355 参考资料 浏览器同源政策及其规避方法(阮一峰) 跨域资源共享 CORS 详解(阮一峰) 本人之前在cnblog上的文章 博客 初次发布2017.03.22于个人博客 http://www.dailichun.com/2017/03/22/ajaxCrossDomainSolution.html 阅读 214.3k更新于 4月7日 本作品系 原创 ， 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 撒网要见鱼 8.1k 38 条评论 得票时间 撰写评论 ... 洪旭 ： 非常不错的文章，解决跨域的方式还有： 设置document.domain=my.com 使用websocket通信 图片Ping 5 回复 2017-12-19 sricoder： 之前用iframe的时候使用过document.domain 回复 2017-12-25 小玖_jiu ： 写的不错！ 之前遇到跨域POST上传图片的问题，用CORS解决了！ 2 回复 2017-12-19 viivLgr ： 很详细 谢谢 1 回复 2017-12-19 Mr_Jason ： 小伙讲的不错，? 1 回复 2017-12-20 null ： ajax和jsonp是两码事，不能混为一谈 1 回复 2017-12-20 撒网要见鱼： 嗯，严格来说不是，但一般都会在封装的ajax方法上兼容一个jsonp请求方式的吧～ 1 回复 2017-12-20 asdjgfr ： 感谢分享，学习了 1 回复 2017-12-21 叶凡 ： 用nginx吧！真正的无痛跨域。 1 回复 2017-12-25 胖胖： 请问 ，nginx 怎么决绝跨域 回复 2018-12-01 深航空少： 所有请求都通过nginx转发，这样的话对于浏览器来说，它自始至终都是与nginx交互，不会出现跨域的情况。 回复 2019-05-09 优de良 ： 其实options请求都还可以优化下, 使用Access-Controll-Max-Age把options请求缓存下来, 具体看mdn上的文档 1 回复 2017-12-25 撒网要见鱼： 已补充！ 回复 2017-12-31 苟且 ： 所以 跨域了都交给后台去搞 1 回复 2018-01-11 噜噜噜噜哒 ： 谢谢分享 回复 2017-12-19 Trinyoung ： 感谢分享 回复 2017-12-25 const ： 就喜欢这种干货 回复 2017-12-25 时尚大肠脸 ： CORS解决跨域问题这个方法每次刷新sessionID都会改变 用不成session 回复 2017-12-27 撒网要见鱼： 这个问题并没有发现呢。各大后台中试过并没看到这个问题。可以分析下，可能是其它原因导致的。 回复 2017-12-31 sangskf： 可以用的，在ajax请求参数上加上withcrediture这个参数就可以了保持session的一致性，这个参数名写的不对，你可以百度下 回复 2018-02-27 zcdll ： 谢谢总结分享！ 回复 2017-12-27 haocity ： CORS IE9及以下是默认禁止的吧。。。 回复 2017-12-29 撒网要见鱼： 不好意思，没有考虑IE，IE8、9下用的是XDomainRequest，不是XHR 回复 2017-12-31 dema ： 非常感谢，对于向我这种小白来说很有价值 回复 2018-01-02 梵天白莲 ： 尤其报错那里，真的很有帮助 回复 2018-01-03 hw798 ： 谢谢分享，真的不错，学习了 。 http://www.hw798.com/ 回复 2018-01-05 Maxiye ： options预检优化，学到了 回复 2018-01-16 April ： 你好 收藏你的文章好久了 今天确实需要用到跨域问题 在tomcat端按照你的讲解配置了 还是访问不到 报404 有时候还报403 被访问的项目不是maven项目。 回复 2018-02-07 撒网要见鱼： 不好意思，回的有点晚。 这个出错的可能性原因比较多，推荐先排查下： 首先，检查前端的options请求预检是否正常（这一步需要后台返回的预检response头部匹配才能继续进行） 另外，404是未找到，403一般是权限校验失败，这两个可能与跨域的干系性不是很大 但是，具体原因还是具体分析，最好可以分析请求的http报文，以及响应的http报文，这样才能去找到原因 回复 2018-02-09 April： 不好意思 答谢的有点晚 我这边apache与tomcat集群配置 暂时通过apache访问 没有跨域问题了 有时间再详细研究一下不好使的原因 感谢您的指教 文章受益匪浅 学习了 回复 2018-02-11 上一页 1 2 下一页 推荐阅读 ajax跨域，这应该是最全的解决方案了 从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。个人见识有限，如有差错，请多多见谅，欢迎提出issue，另外看到这个标题，请勿喷~关于跨域，有N种类型，本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器同源策略中的一部分,其它的还有Cookie跨域ifr 撒网要见鱼 阅读 592 跨域（入门） 同源策略所谓“同源”，就是“三个相同”：协议相同、域名相同、端口相同。同源策略的目的：保证用户信息的安全，防止恶意网站窃取数据。如果是非同源，共有三种行为会受到限制：1.Cookie、LocalStorage、IndexDB无法读取；2.DOM无法获取；（主要场景是ifame跨域的情况，不同域名的iframe是限制互相访问的）3.AJAX请求不能发送；跨域资源共享（CORS）html5新增的标准， 明矾 阅读 23 跨域资源共享 CORS 笔记 1.CORS是一个W3C标准，全称是跨域资源共享（Cross-originresourcesharing）。2.它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。3.CORS需要浏览器和服务器同时支持。4.整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发 MurasakiSeiFu 阅读 579 跨域资源共享 CORS CORS是一个W3C标准，全称是跨域资源共享（Cross-originresourcesharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJA zer0_li 阅读 205 前端跨域的整理 对于web开发来讲，由于浏览器的同源策略，我们需要经常使用一些hack的方法去跨域获取资源，但是hack的方法总归是hack。直到W3C出了一个标准－CORS－跨域资源共享（Cross-originresourcesharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。首先来说CORS需要浏览器和服务端同时支持的，对于兼容性来说主要是 阿城 阅读 123 jsonp-反向代理-CORS解决JS跨域问题的个人总结 解决js跨域问题一共有8种方法，各个方法都有各自的优缺点，但是目前前端开发方面比较常用的是jsonp，反向代理，CORS：CORS是跨源资源分享（Cross-OriginResourceSharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。优点是正统，符合标准，缺点是：JSONP优点是对旧式浏览器支持较好，缺点是：反向代理都能够兼容以上的确定，但是仅仅作为前端开发模式的时候使用 线上猛如虎 阅读 22 jsonp-反向代理-CORS解决JS跨域问题的个人总结（更新 v2.0） 解决js跨域问题一共有8种方法：各个方法都有各自的优缺点，但是目前前端开发方面比较常用的是jsonp，反向代理，CORS：CORS是跨源资源分享（Cross-OriginResourceSharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。JSONP的核心则是动态添加