Andrea's Hello world

最近開始撰寫Web API 專案
API的使用遇到了Cross Domain(Cross-Origin Resource Sharing)的問題
弄了好久目前終於解掉了QQ
所以來記錄一下

最早是同事使用fetch打API時出現以下錯誤

 

處理過程中發現

一開始確實是因為cors的header問題

(雖然最終是因為公司IIS設定產生預檢請求不通過  請看下一篇~)

這部分主要嘗試了兩種不同方法

 

方法一

在Web.Config中設定  

但因為這個設定會針對整個專案進行動作,如果全站皆可使用cors,可能有資安上面疑慮,所以使用方法二

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />                                                    
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
      </customHeaders>
    </httpProtocol>

 

★關於Access-Control-Allow-Origin設定  

→ value= "*" 為允許任何來源的跨來源請求

<add name="Access-Control-Allow-Origin" value="*" />

→ value= "http://www.yourSite.com" 為允許指定來源的跨來源請求(※注意：若"指定來源"只能設定一個)

<add name="Access-Control-Allow-Origin" value="http://www.yourSite.com" />

補充：後來爬到一篇文章，不過沒有實際實作過，若有人想設定多個來源可參考看看此篇   https://dotblogs.com.tw/topcat/2014/01/12/139610

 

方法二

因為只要針對程式中某幾隻的API開放

所以後來使用了Cors套件 

1.先安裝套件

2.在 WebApiConfig.cs. 中加入以下code

---

public static void Register(HttpConfiguration config)
{
    // Web API configuration and services

    // Web API routes

    config.EnableCors();

    config.MapHttpAttributeRoutes();

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

---

3.針對使用的controller加入using 

using System.Web.Http.Cors; 

4. 在該隻程式上放上屬性設定 [EnableCors(origins: "*", headers: "*", methods: "*")]

eg:

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class HomeController : ApiController
{
    [HttpGet]
    [Route("api/Home/testing")]
    public string test()
    {
       return "";
    }
}