## 如何在後端 API 加 header
### 法一：自訂 CORS 原則提供者
在 **startup.cs** 中加入

// Configure() 內加
app.UseCors("CorsPolicy");
//ConfigureServices() 內加
services.AddCors(o => o.AddPolicy("CorsPolicy", p => p.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()));

### 法二：add at **web.config**
only For IIS 7.5

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://www.yourSite.com" />
        <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>

### 法三：use package **Microsoft.AspNet.WebApi.Cors**
1. Install-Package **Microsoft.AspNet.WebApi.Cors**
2. Add this code in **WebApiConfig.cs**

    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. Add code in Api Controller

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

## http header 種類
* `Access-Control-Allow-Origin`:允許哪些網址可以跨網域使用此資源。
同源需要 schema(protocol) + host + port 都相同才行。schema：http, https
Eg. http://web.com.tw 或給 * 允許所有來源可以跨域存取。
ex. `Access-Control-Allow-Origin: *`
* `Access-Control-Allow-Credentials`：當前端API request需要帶cookies時，就須此屬性並將值設定為true，預設為false。另外，當此屬性設定為true時，`Access-Control-Allow-Origin`則不能設定為*
ex. `Access-Control-Allow-Credentials:true`
* `Access-Control-Allow-Methods`：支援的Method有哪些(POST, GET, PUT, DELETE...)
ex. `Access-Control-Allow-Methods:POST, GET, PUT, DELETE`
* `Access-Control-Allow-Headers`：允許哪些自定義的header
ex. `Access-Control-Allow-Headers: Authorization`
* `Access-Control-Max-Age`：preflight request的資訊（包含`Access-Control-Allow-Methods`和 `Access-Control-Allow-Headers` 可以cache的秒數上限(單位：秒)。每一個瀏覽器會有預設的最大值 ，當 `Access-Control-Max-Age` 大於預設值時，會優先採用預設值。
ex. `Access-Control-Max-Age: 600` // Cache results of a preflight request for 10 minutes
* `Access-Control-Expose-Headers`：表示API Server允許瀏覽器存取response header的白名單
ex. `Access-Control-Expose-Headers:X-My-Custom-Header` //表示瀏覽器能夠存取response當中的 X-My-Custom-Header

## 相關網址
[API串接常見問題 - CORS - 鐵人賽系列篇](https://ithelp.ithome.com.tw/articles/10267360)
[How to implement "Access-Control-Allow-Origin" header in asp.net](https://stackoverflow.com/questions/6516591/how-to-implement-access-control-allow-origin-header-in-asp-net)
[自訂 CORS 原則提供者 - 官方網址](https://learn.microsoft.com/zh-tw/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api#custom-cors-policy-providers)