ASP.NET WebApi+Vue前后端分离之允许启用跨域请求

前言：

这段时间接手了一个新需求，将一个ASP.NET MVC项目改成前后端分离项目。前端使用Vue，后端则是使用ASP.NET WebApi。在搭建完成前后端框架后，进行接口测试时发现了一个前后端分离普遍存在的问题跨域（CORS）请求问题。因此就有了这篇文章如何启用ASP.NET WebApi 中的 CORS 支持。

一、解决Vue报错：OPTIONS 405 Method Not Allowed问题：

错误重现：

index.umd.min.js:1 OPTIONS http://localhost:1204/api/Login/ShopKeeperLogin 405 (Method Not Allowed)

解决方法：

在项目Global.asax中添加对OPTIONS方法的处理：

/// <summary>
        /// 跨域设置（预请求响应问题）
        /// </summary>
        protected void Application_BeginRequest()
        {
            //OPTIONS请求方法的主要作用（预请求，判断是否能够请求成功）：
            //用来检查服务器的性能。如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                //表示对输出的内容进行缓冲，执行page.Response.Flush()时，会等所有内容缓冲完毕，将内容发送到客户端。
                //这样就不会出错，造成页面卡死状态，让用户无限制的等下去
                Response.Flush();
            }
        }

二、解决ASP.NET WebApi 跨域资源共享-Cross Origin Resource Sharing(CORS)问题：

错误重现：

　Access to XMLHttpRequest at ‘http://localhost:1204/api/Login/ShopKeeperLogin‘ from origin ‘http://localhost:8081‘ has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

允许所有来源，HTTP方法，请求标头跨域：

在Web.config中找到system.webServer标签里面添加如下配置：

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
      </customHeaders>
    </httpProtocol>

指定对应来源，HTTP方法和请求标头跨域：

详情参考微软官方文档：https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api#set-the-allowed-origins