JS Call API 出現 Refused to connect ... violates the following Content Security Policy directive default-src self 的錯誤

前言

同事詢問有 2 個 Web AP(前台 localhost:44306，後台 localhost:59149)，
結果前台的 JS 呼叫後台的 api 時，會發生 Refused to connect to 'https://localhost:59149/api..' because it violates the following Content Security Policy directive: "default-src 'self'". Note the 'connect-src' was not explicity set, so 'default-src' is used as a fallback. 的錯誤，如下，

除錯

前台 JS(localhost:44306) 透過 CORS 呼叫 後台目標服務(localhost:59149)時，
後台目標服務(localhost:59149) Response 出來的 Header 需要有
Access-Control-Allow-Origin:js url 來允許 JS 呼叫。

如果要設定 CSP 的 default-src or connect-src ，則要設定 connect-src 加入 前台(localhost:44306) ，如下，

Content-Security-Policy:"connect-src 'self' 'https://localhost:44306';"

如果沒有設定的話，那 js 的 fetch 就會被 browser 擋住。

於是 檢查 被呼叫端(localhost:59149)的確有 response 那 2 個 headers (如上圖)，
但是在 Browser 開發工具中的 主控台(Console) 卻一直噴 default-src 'self' 的錯誤。

檢查 後台(localhost:59149) 的程式碼，
也沒有找到任何設定 default-src 'self' 的地方。
如果用簡單的測試程式來測試，卻又是正常的。

後台(localhost:59149) 程式碼沒有問題?
那是否出在 測試電腦的 Browser 問題，
於是改用 無痕、改用 Edge 都是一樣的錯誤訊息。

於是跟同事拿了 2 個 Web AP(前台 localhost:44306，後台 localhost:59149) 的程式碼來本機測試看看，
檢查 後台(localhost:59149) 程式碼的確沒有任何問題，
倒是在檢查 前台(localhost:44306) 程式碼時，發現在 Middleware 有設定 CSP 的程式碼，
裡面有設定 default-src 'self' ，如下，

app.UseSetHeaders(new Dictionary<string, string> {
      {"X-FRAME-OPTIONS","SAMEORIGIN"},
      {"Content-Security-Policy","default-src 'self';style-src 'self';style-src-elem 'unsafe-inline' 'self'; script-src 'unsafe-eval' 'unsafe-inline' 'self';font-src 'self' data:;" }
  });

謎題解開了，原來設定 default-src 'self' 的地方是在 前台(localhost:44306)，
因為有設定 default-src 'self' ，但卻沒有設定 connect-src ，
所以才導致 前台 JS(localhost:44306) 透過 CORS 呼叫時，
就被自已給限制住了。

將前台(localhost:44306) 的 default-src 'self' 設定值拿掉，
前台 JS(localhost:44306) 透過 CORS 呼叫 後台目標服務(localhost:59149) 就正常了哦~

原來除了檢查 後台外，也要注意 前台有沒有設定 CSP ，QQ

參考資源

CSP: connect-src
Refused to connect to x because it violates the following Content Security Policy directive (connect-src)