WebApi2跨域问题及解决办法

跨域问题产生的原因

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能。现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。由于同源策略的限制，JavaScript就产生了跨域的问题。

在WebApi2中的解决方法

1. 在nuget中添加cors

cors解释链接地址：http://www.ruanyifeng.com/blog/2016/04/cors.html

2. 在文件WebApiConfig.cs中配置跨域设置  

//简写  
//var cors = new EnableCorsAttribute("*", "*", "*");  
//config.EnableCors(cors);  
//要写http://10.116.56.69:90  

var allowOrigins = ConfigurationManager.AppSettings["cors_allowOrigins"];
var allowHeaders = ConfigurationManager.AppSettings["cors_allowHeaders"];
var allowMethods = ConfigurationManager.AppSettings["cors_allowMethods"];
var globalCors = new EnableCorsAttribute(allowOrigins, allowHeaders, allowMethods);
globalCors.SupportsCredentials = true; //跨域cookie的解决与【4】withCredentials结合使用
config.EnableCors(globalCors);

3. 前端提交ajax请求，用的类型是application/json

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）,ptions请求。

请避免用"预检"请求（preflight）

原因：预检每次会发送两个请求浪费资源，预检都是复杂操作，预检修改HTTP的头信息，使头部信息复杂

避免预请求请确保一下1.请求方法是以下三种方法之一：
HEAD
GET
POST
2.HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

<add key="cors_allowOrigins" value="http://localhost:49632,http://127.0.0.1:49632" />
<add key="cors_allowHeaders" value="X-Requested-With,Content-Type" />
<add key="cors_allowMethods" value="PUT, GET, POST, DELETE, OPTIONS" />
    
<system.webServer>
     <handlers> <!--此处处理options请求。或去iis里面删除、添加上动作添加上OPTIONS-->
      <remove name="OPTIONSVerbHandler" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
</system.webServer>

4. 跨域cookie的问题

默认cookie不会传递到后台，所以这里要传递过去。

$.ajax({
    type: "post",
    contentType: 'application/json',
    url: "http://localhost:49632/Controller/test",
    xhrFields: {
        withCredentials: true
    },
    data: JSON.stringify({ Data: param}),
    success: function (data) {
        alert(data.msg);
    }
});

5. 解决IE8，IE9的问题  

请求获得不到参数的问题，web api会对请求的参数序列化。

在Global.asax中添加GlobalConfiguration.Configuration.MessageHandlers.Add(new CrossDomainFixIEHandler());  

public class CrossDomainFixIEHandler : DelegatingHandler
{
    protected override System.Threading.Tasks.Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, System.Threading.CancellationToken cancellationToken)
    {
        if (request.Method == HttpMethod.Options)
        {
            HttpResponseMessage response = request.CreateResponse<string>(HttpStatusCode.OK, null);
            TaskCompletionSource<HttpResponseMessage> tcs = new TaskCompletionSource<HttpResponseMessage>();
            tcs.SetResult(response);
            return tcs.Task;
        }
        if (request.Content.Headers.ContentType != null && request.Content.Headers.ContentType.MediaType== "application/x-www-form-urlencoded")
        {
            string contentType = "application/json";
            request.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(contentType);
        }
        return base.SendAsync(request, cancellationToken);
    }
}