ajax跨域请求附带自定义请求头问题总结

  ajax跨域请求其他页面,其他页面如果设置了Access-Control-Allow-Origin为*允许任何域名请求或者为特定的域名,此时这个跨域的地址可以被所有域(为*)或者特定的域名请求,Access-Control-Allow-Origin一次只能设置一个,不想设置为*,只允许特定的多个域名访问可以参考这个:通过Access-Control-Allow-Origin控制允许ajax跨域请求的域名

 

  如果ajax请求附带了自定义的请求头,如token之类的自定义请求头,那么浏览器ajax会分别请求2次服务器

1)第一次用OPTIONS请求获取服务器响应头看是否允许跨域请求

2)第二次才是按照ajax指定的方法进行请求获取响应的数据

  这时要注意了,有些语言OPTIONS请求动态页设置的Access-Control-Allow-Origin是没有效果的,如asp.net测试代码如下,OPTIONS请求是不附带Access-Control-Allow-Origin响应头的,所以报错了,Asp.net的OPTIONS请求应该web服务器处理的,并非aspx页面,所以下面的代码并没有附加Access-Control-Allow-Origin,Access-Control-Allow-Headers响应头

x.aspx

<%@ Page Language="C#" AutoEventWireup="true"  %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.AddHeader("Access-Control-Allow-Origin", "*");
        Response.AddHeader("Access-Control-Allow-Headers", "token");
        Response.Write(DateTime.Now);
        Response.End();
    }
</script>

ajax跨域请求附带自定义请求头问题总结

  给web服务器添加Access-Control-Allow-Origin为*

ajax跨域请求附带自定义请求头问题总结

  此时可以看到OPTIONS请求还是报错,但是不再是“原因:CORS 头缺少 'Access-Control-Allow-Origin'”,而是原因:来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'token' 无效

ajax跨域请求附带自定义请求头问题总结

  这是自定义请求头导致的,被请求服务器也需要设置Access-Control-Allow-Headers为对应的请求头键名称,多个用英文状态下逗号隔开,如token,x-valid,通过上面知道OPTIONS请求web服务器请求,所以自定义的请求头也需要在web服务器进行添加

ajax跨域请求附带自定义请求头问题总结

 

  设置好web服务器的这2个请求头后,options请求通过,但是ajax指定的实际请求方法会报错:原因:CORS 头 'Access-Control-Allow-Origin' 不匹配 '(null)',这个是因为代码里面设置的Access-Control-Allow-Origin响应头和web服务器设置的叠加了,如下图所示

ajax跨域请求附带自定义请求头问题总结

  此时只需要去掉动态页设置的这2个响应头就可以了。

asp.net中尝试过用Response.ClearHeaders();清除web服务器设置的响应头,但是无效。。。不懂什么肥事。。。