两步轻松解决ASP.NET Web API跨域问题

只要按照 步骤1 和 步骤2 就可以轻松解决跨域问题

1、配置web.config

需要在web.config的<system.webServer>节点增加如下内容

    <system.webServer>
        <httpProtocol>    
        <customHeaders>        
        <add name="Access-Control-Allow-Origin" value="*" />   
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />    
        </customHeaders>
        </httpProtocol>
    </system.webServer>

如需要支持自定义头信息，只需要在 <add name="Access-Control-Allow-Headers" value="Content-Type" /> 的value属性中增加即可。

例如，添加自定义 token 头信息，可以表示如下。

 <add name="Access-Control-Allow-Headers" value="Content-Type,token" />

2、响应OPTIONS请求

跨域访问时，浏览器会先向web api服务器发送一个OPTIONS请求,所以Web api需要正确响应OPTIONS请求。只需要在 Global.asax 文件中，添加如下内容即可。

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
            var req = System.Web.HttpContext.Current.Request;
            if (req.HttpMethod.ToUpper() == "OPTIONS")//跨域响应
            {
                Response.StatusCode = 200;
                Response.SubStatusCode = 200;
                Response.End();
            }
            
    }

3、部署到IIS注意事项

部署到IIS时配置的应用程序池的托管管道模式要选择`集成`模式。使用`经典`模式，将无法正确响应OPTIONS请求，返回404 Not Found的错误。

4、前端注意事项

对于指定 Content-Type 为 application/json 的POST请求

• 若使用JQuery，则data中的字符串需要使用`JSON.stringify`进行序列化，否则后端接收到参数将为null(经测试验证即使字符串的格式本身已经符合json规范，也要使用JSON.stringify进行序列化)
• 若使用Angular，data中的字符串符合json格式规范即可。

5、参考资料

• 关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案
• C#进阶系列——WebApi 接口参数不再困惑：传参详解
• Asp.Net WebApi对js POST带参数跨域请求的支持方案