说起跨域,估计写过WebAPI接口的都遇到过这个比较费脑的问题,这个坑我也没有例外的时候跳了下去,前段时间搭了一个框架给公司某应用写接口,然后发布到服务器上后再使用ajax调用时就出现了跨域问题,通过跟前端同事的交流和查阅资料最终也得以解决。

跨域问题截图:

解决方法:通过在Web.config的System.WebServer节点下添加以下代码即可解决,因为目前仅用于测试,所以Access-Control-Allow-Origin这里我直接给的是*,代表任何来源均可访问,如果上线发布的话,出于安全考虑,建议把*改为应用上线的域名或Ip地址。

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type" />
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>

解决后截图:

上述问题是最常见的跨域报错及解决方法,而目前我们在做WebApi的时候,一般都是采用Token验证,而Token是应该放在请求的Headers里传到后台的,如果我们在Headers中定义参数如下{Token:Value},然后再次请求接口的时候就会报如下错误:

Access to XMLHttpRequest at 'http://118.xxx.110.xxx:8xx3/DriverInxxxfaces/SendCode' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

然后网查了一些资料,资料1资料2,这两篇博文在问题的解决中起到了很大的作用,还是要感谢前辈们的分享。

最后解决方案如下:

1.首先在Global.asax中新增Application_BeginRequest方法

        protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.End();
            }
        }

2.修改Web.Config,将上面的Web.Config的配置进行更改

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type,Token" />
        <add name="Access-Control-Expose-Headers" value="*" />
        <add name="Access-Control-Allow-Credentials" value="true" />
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>

至此所有关于跨域及Headers自定义参数问题得到解决。