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);

    }

}