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

好了，到这里我终于能够成功的跨域请求了，真心不容易啊！