一：WebAPI跨域遇到的問題

最近在研究vue+webapi實現前後端分離，在前後端資料互動的時候真的是被跨域的問題搞得我人都要炸了，第一是限制多個域名跨域請求的問題，二是options預請求的問題，三是我使用了owin驗證，阻止了跨域，唉，只能怪自己對webapi不熟悉，記錄一下避免下次在犯錯！
下面列舉一下常見的跨域設定方式：

二：常見的跨域設定方式

1：直接在webconfig節點中設定

在Web.config中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>
    <handlers>
    <remove
 
 name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <remove name="TRACEVerbHandler" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"
 
 />
  </handlers>

httpProtocol節點裡面增加的是關於跨域的限制，Access-Control-Allow-Origin這個是允許通過跨域的網址，第二個是響應頭不用改，預設‘*’也行，第三個是允許通過跨域的方式，下面handlers節點網上的解釋是webapi預設是拒絕option請求的需要刪除掉OPTIONSVerbHandler，這些都是網上百度的，有些人這樣配置了之後就可以了，但我很悲催這樣配置之後不行！
下面是第二種解決方式:

2：使用Microsoft.AspNet.WebApi.Cors進行跨域

在專案中用NuGet安裝microsoft.aspnet.webapi.cors（支援多個域名跨域）

然後開啟App_Start資料夾下面的WebApiConfig.cs資料夾配置跨域

程式碼：

  var allowOrigins = ConfigurationManager.AppSettings["cors_allowOrigins"];
            var allowHeaders = ConfigurationManager.AppSettings["cors_allowHeaders"];
            var allowMethods = ConfigurationManager.AppSettings["cors_allowMethods"];
            var globalCors = new System.Web.Http.Cors.EnableCorsAttribute(allowOrigins,allowHeaders, allowMethods)
            {
                SupportsCredentials = true
            };

在appSettings節點中增加配置：

  <appSettings>
    <add key="cors_allowOrigins" value="http://localhost:8080/,http://novel.xpzzs.top/" />
    <add key="cors_allowHeaders" value="*" />
    <add key="cors_allowMethods" value="*" />
  </appSettings>

一般這樣配完就已經成功了，但也有options預請求失敗的情況，如果出現這種情況可以直接吧option請求攔截，讓它直接返回成功，看看能不能實現跨域！
新增一個類繼承HttpModule：

  public class SpecialMethodModule : IHttpModule
    {
        public SpecialMethodModule() { }
        public void Init(HttpApplication app)
        {
            app.BeginRequest += new EventHandler(this.BeginRequest);
        }
        public void Dispose() { }
        public void BeginRequest(object resource, EventArgs e)
        {
            HttpApplication app = resource as HttpApplication;
            HttpContext context = app.Context;
            if (context.Request.HttpMethod.ToUpper() == "OPTIONS")
            {
                context.Response.StatusCode = 200;
                context.Response.End();
            }
        }
    }

三：OWin本身跨域問題

如果上面操作做完都還不行，那麼你可以看下引用中是否有新增owin的引用，如果是有OWin，那麼極大可能是因為owin的問題，到Startup.cs中找到Configuration方法，在這個方面中新增：

 app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

好了，到這裡我終於能夠成功的跨域請求了，真心不容易啊！