當我們部屬好自己的前端Angular專案與後端.net Core API到Azure後

一定會需要從我們自己的前端撈後端的資料

這時候想必一定會遇到CORS的問題

https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Server-Side_Access_Control

跨來源資源共用（Cross-Origin Resource Sharing (CORS)）是一種使用額外 HTTP 標頭令目前瀏覽網站的使用者代理取得存取其他來源（網域）伺服器特定資源權限的機制。當使用者代理請求一個不是目前文件來源——例如來自於不同網域（domain）、通訊協定（protocol）或通訊埠（port）的資源時，會建立一個跨來源 HTTP 請求（cross-origin HTTP request）

這問題困擾我很多次所以要來一天介紹

之前我們在Angular使用http撈資料時，因為跨域撈資料了所以產生CORS問題
No 'Access-Control-Allow-Origin' header is present on the requested resource.
那時候是參考這篇來解決的，不過現在將程式部屬到網路上了，就不能再依靠瀏覽器的安全性設定來檢視網頁

所以我們就要針對前端與後端去做設定

參考了各大文章，前端與後端的設定分別如下

前端

前端需要在http呼叫時間的header下手腳，這樣後端API才懂

並在http呼叫的時候，將header參數一起丟進去

programs.service.ts

public httpOptions = {
    headers: new HttpHeaders({
      'Access-Control-Allow-Origin': 後端API的Domain,
      'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
      'Access-Control-Max-Age': '86400'
    })
  };
  public getBackendData(
  ): Observable<any> {
    const getURL = 後端API的Domain/api/user/GetAllUser;
    return this.http.get<any>(getURL, this.httpOptions);  
  }

後端

在StartUp.cs中，找到ConfigureServices

 public void ConfigureServices(IServiceCollection services)
   {
        services.AddCors(options =>
       {
        // CorsPolicy 是自訂的 Policy 名稱
        options.AddPolicy("CorsPolicy", policy =>
          {
            policy.AllowAnyOrigin().SetPreflightMaxAge(new TimeSpan(86400))
                     .AllowAnyHeader() //這邊是自己要用的，先允許全部了
                     //.WithOrigins("http://localhost:3000") 可以指定哪個前端網頁才能呼叫
                     .AllowAnyMethod()
                     .AllowCredentials();
            });
       });
           
   }

接著在Configure中，不論測試還是正式環境，都加上app.UseCors("CorsPolicy");

 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseCors("CorsPolicy"); 
            }
            else
            {
                app.UseHsts();
                app.UseCors("CorsPolicy");
            }

            app.UseHttpsRedirection();
            app.UseMvc();
        }

這樣就搞定了

參考資料

https://ithelp.ithome.com.tw/articles/10207546
https://blog.johnwu.cc/article/ironman-day26-asp-net-core-cross-origin-requests.html
https://blog.toright.com/posts/3205/%E5%AF%A6%E4%BD%9C-cross-origin-resource-sharing-cros-%E8%A7%A3%E6%B1%BA-ajax-%E7%99%BC%E9%80%81%E8%B7%A8%E7%B6%B2%E5%9F%9F%E5%AD%98%E5%8F%96-request.html