利用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函数就能够了！