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