ajax跨域

ajax跨域的原理

ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考浏览器同源政策及其规避方法(阮一峰)

如何判断是否是简单请求?

浏览器将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)

凡是不同时满足上面两个条件，就属于非简单请求

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

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

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

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

  

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

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

  
  

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

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

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

这种现象和第一种和第二种有区别,这种情况下，服务器端后台允许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下的配置*，只用项目配置中的即可