ASP.NET WebApi+Vue先後端分離之容許啓用跨域請求

前言：

　　這段時間接手了一個新需求，將一個ASP.NET MVC項目改爲先後端分離項目。前端使用Vue，後端則是使用ASP.NET WebApi。在搭建完成先後端框架後，進行接口測試時發現了一個先後端分離廣泛存在的問題跨域（CORS）請求問題。所以就有了這篇文章如何啓用ASP.NET WebApi 中的 CORS 支持。

1、解決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();
            }
        }

2、解決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