咨询电话:
15628812133
07
2019/09

Ajax跨域问题全面了解

发布时间:2019-09-07 17:53:58
发布者:就是帅
浏览量:
0

从刚接触对接接口起,跨域这个问题就一直发生在我的身上,当然同事的身上也时常发生,一直到现在,已经解决过测试过超级多个跨域相关的问题了,现在就来总结一下,其中的原因和解决方法。

ajax跨域的表现

ajax请求时,如果存在跨域现象,并且没有进行解决,会出现下面几种错误现象:

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

跨域表现.png

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

  • 本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)

  • 服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址

解决方案: 后端允许options请求

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

跨域表现2.png

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

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

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

跨域表现1.png

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

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

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

第四种现象:heade contains multiple values '*,*'

跨域表现3.jpg

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

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

  • 常见于.net后台(一般在web.config中配置了一次origin,然后代码中又手动添加了一次origin(比如代码手动设置了返回*))

  • 常见于.net后台(在IIS和项目的webconfig中同时设置Origin:*)

解决方案(一一对应):

  • 建议删除代码中手动添加的*,只用项目配置中的即可

  • 建议删除IIS下的配置*,只用项目配置中的即可

返回列表