ASP.NET Web API 2 Enabling Cross-Origin Requests 錯誤訊息處理

基於資料安全的原則,瀏覽器預設禁止跨網域連線,避免惡意網站讀取其他網站敏感資料。

因此實作Web API Client端呼叫時便會出現,Enabling Cross-Origin Requests 錯誤訊息。

以下是我遇到這個錯誤訊息的處理解決方法,供參考!

參考網址: https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Step1: 加入NuGet套件,開啟Package Manager Console,輸入 Install-Package Microsoft.AspNet.WebApi.Cors

Install-Package Microsoft.AspNet.WebApi.Cors

Step2: 修改 App_Start/WebApiConfig.cs 

using System.Web.Http;
namespace WebService
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // New code
            config.EnableCors(); //加入此段設定

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

Step3:選擇在Controller或Action加入

[EnableCors(origins: "請輸入請求端URL",headers: "*", methods: "*")]//"*" 代表允許任何來源
[EnableCors(origins: "*",headers: "*", methods: "*")]//允許任何來源寫法,方便測試階段使用

加在Controller

using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace WebService.Controllers
{
    [EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }
}

加在各個不同Action上

public class ItemsController : ApiController
{
   [EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")]
    public HttpResponseMessage GetAll() { ... }

    public HttpResponseMessage GetItem(int id) { ... }

    public HttpResponseMessage Post() { ... }

    public HttpResponseMessage PutItem(int id) { ... }
}

 

 

參考網址: https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

其他相關參考:https://ithelp.ithome.com.tw/articles/10094915