利用Owin解决CORS报错问题

我的项目是vue + ASP.NET 。在 Vue调试时，由于vue开启的调试用的服务器端口号 和 后台.NET程序的端口号是不同的，发送Ajax请求时，就会报错。这里就不提报错的原因了，网上有很多，基本的解决方法就是为对应的Action添加Header，比如以下代码：

        public ActionResult MeetingList() {

            Response.AppendHeader("Access-Control-Allow-Origin", "*");
            Response.Headers.Add("Access-Control-Allow-Headers", "x-requested-with,content-type");

            if (Request.HttpMethod.Equals("Options", StringComparison.OrdinalIgnoreCase))
            {
                return new EmptyResult();
            }

            var meetingList = _meetingRepository.GetMeetings();

            var MeetingDtoList = Mapper.Map<List<MeetingSelectDto>>(meetingList);

            return Json(MeetingDtoList, JsonRequestBehavior.AllowGet);
        }

原理虽然如此，但是要为每一个Action都添加这样的代码，太不友好了。

这时可以使用Owin 的管道提前处理每一个请求，关于Owin，又是一个大话题，请自行google。

这里给一个自己写Owin中间件的教程链接 http://www.cnblogs.com/gaobing/p/5076089.html

我根据上面的链接，写的代码如下：

namespace WebApplication1.Middleware
{
  public class CORSMiddleware : OwinMiddleware
  {
    public CORSMiddleware(OwinMiddleware next) : base(next) {

    }

    public override Task Invoke(IOwinContext context)
    {
      
     
      context.Response.Headers.Add("Access-Control-Allow-Origin",new string[] { "*" });

      context.Response.Headers.Add("Access-Control-Allow-Headers", new string[] { "x-requested-with,content-type" });

      if (context.Request.Method.Equals("Options", StringComparison.OrdinalIgnoreCase))
      {
        return Task.FromResult<int>(0);
      }
      return Next.Invoke(context);
    }
  }
}

 

 

namespace WebApplication1.Middleware
{
  public static class AppBuilderExtension
  {
    public static IAppBuilder UseCORS(this IAppBuilder builder)
    {
      return builder.Use<CORSMiddleware>();
    
    }

  }
}

之后在Startup里调用 UseCORS函数就可以了！