跨域问题

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 后台允许跨域

<?php header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept'); //主要为跨域CORS配置的两大基本信息,Origin和headers 第二步:配置Apache web服务器跨域(httpd.conf中) 原始代码 AllowOverride none Require all denied 改为以下代码 Options FollowSymLinks AllowOverride none Order deny,allow Allow from all Node.js后台配置(express框架) Node.js的后台也相对来说比较简单就可以进行配置。只需用express如下配置: app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", ' 3.2.1') //这段仅仅为了方便返回json而已 res.header("Content-Type", "application/json;charset=utf-8"); if(req.method == 'OPTIONS') { //让options请求快速返回 res.sendStatus(200); } else { next(); } }); JAVA后台配置 JAVA后台配置只需要遵循如下步骤即可: 第一步:获取依赖jar包 下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下) 第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中:(非maven请忽视) com.thetransactioncompany cors-filter [ version ] 其中版本应该是最新的稳定版本,CORS过滤器 第三步:添加CORS配置到项目的Web.xml中( App/WEB-INF/web.xml) CORS com.thetransactioncompany.cors.CORSFilter cors.allowGenericHttpRequests true cors.allowOrigin * cors.allowSubdomains false cors.supportedMethods GET, HEAD, POST, OPTIONS cors.supportedHeaders Accept, Origin, X-Requested-With, Content-Type, Last-Modified cors.exposedHeaders X-Test-1, X-Test-2 cors.supportsCredentials true cors.maxAge 3600 CORS /* 请注意,以上配置文件请放到web.xml的前面,作为第一个filter存在(可以有多个filter的) 第四步:可能的安全模块配置错误(注意，某些框架中-譬如公司私人框架，有安全模块的，有时候这些安全模块配置会影响跨域配置，这时候可以先尝试关闭它们) JAVA Spring Boot配置 20171230补充 仅列举简单的全局配置 @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); // 可以自行筛选 corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source); } } 新建配置，然后添加Configuration注解即可配置成功 PS：这一部分方法是收录的，没有亲身实践过，但根据反馈，理论上可行 NET后台配置 .NET后台配置可以参考如下步骤: 第一步:网站配置 打开控制面板，选择管理工具,选择iis;右键单击自己的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站 请注意,以上截图较老,如果配置仍然出问题,可以考虑增加更多的headers允许,比如: "Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin" 第二步:其它更多配置,如果第一步进行了后,仍然有跨域问题，可能是: 接口中有限制死一些请求类型(比如写死了POST等)，这时候请去除限 制 接口中，重复配置了Origin:*，请去除即可 IIS服务器中，重复配置了Origin:*，请去除即可 代理请求方式解决接口跨域问题 注意，由于接口代理是有代价的，所以这个仅是开发过程中进行的。 与前面的方法不同，前面CORS是后端解决，而这个主要是前端对接口进行代理，也就是: 前端ajax请求的是本地接口 本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端 一般用node.js即可代理 关于如何实现代理，这里就不重点描述了，方法和多，也不难，基本都是基于node.js的。 搜索关键字node.js,代理请求即可找到一大票的方案。 OPTIONS预检的优化 Access-Control-Max-Age: 这个头部加上后，可以缓存此次请求的秒数。 在这个时间范围内，所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据。 非常有用，可以大幅优化请求次数 如何分析ajax跨域 上述已经介绍了跨域的原理以及如何解决，但实际过程中，发现仍然有很多人对照着类似的文档无法解决跨域问题，主要体现在，前端人员不知道什么时候是跨域问题造成的，什么时候不是，因此这里稍微介绍下如何分析一个请求是否跨域: 抓包请求数据 第一步当然是得知道我们的ajax请求发送了什么数据，接收了什么，做到这一步并不难，也不需要fiddler等工具，仅基于Chrome即可 Chrome浏览器打开对应发生ajax的页面，F12打开Dev Tools 发送ajax请求 右侧面板->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 内推邮箱 lichun.dlc@alibaba-inc.com 简历发我邮箱，必有回应，符合要求直接走内推！！！ 一对一服务，有问必答！ 也可加我微信了解更多：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的核心则是动态添加