WebAPI跨域问题

背景：用webapi做了一个前后端分离的登录,获取token，然后头部带着token去访问后端的controller中的action。

一、在Web.config增加配置

在Web.config中system.webServer节点下面，增加配置项，设置输出的http header,类似于如下代码，主要是httpProtocol中的代码：

<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>
</system.webServer>

这样做的时候可以获取到token。但是访问不到后端的controller中的action。报错：

二、使用Microsoft.AspNet.WebApi.Cors进行跨域

首先先引入这个类库，然后在WebApiConfig.cs中Register方法中进行注册，大概代码如下：

var cors = new EnableCorsAttribute("*", "*", "*");
GlobalConfiguration.Configuration.EnableCors(cors);

就这两行，然后我把Web.config中的代码拿掉，只加这个的时候，浏览器端response回来的根本就没有了跨域的header，再次宣布失败~.token都获取不到了。错误：

三、最终解决方案

1、首先引入这两个nuget包

2、在Startup.Auth中添加一行代码

3、记得把之前添加的两行去掉。

var cors = new EnableCorsAttribute("*", "*", "*");
GlobalConfiguration.Configuration.EnableCors(cors);