Slack 傳入 webhook：預檢響應中的 Access-Control-Allow-Headers 不允許請求標頭字段 Content-type

Question

我嘗試通過瀏覽器中的 fetch API 發布一條 slack 消息：

fetch('https://hooks.slack.com/services/xxx/xxx/xx', {
  method: 'post',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-type': 'application/json'
  },
  body: JSON.stringify({text: 'Hi there'})
})
  .then(response => console.log)
  .catch(error => console.error);
};

我收到以下錯誤消息：

Fetch API cannot load:
https://hooks.slack.com/services/xxxxxxx/xxxxx. 
Request header field Content-type is not allowed by Access-Control-Allow-Headers in preflight response.

怎么辦？

Answer 1

正是疲軟的API端點不幸出現在其處理從前端JavaScript的跨域請求的被打破的代碼，因為它不處理CORS預檢OPTIONS請求，因為它應該那么唯一的解決辦法似乎是省略Content-Type標題。

因此，您似乎需要從請求代碼的headers部分中刪除以下內容：

'Content-type': 'application/json'

'Content-type': 'application/json'部分會觸發您的瀏覽器執行CORS 預檢OPTIONS請求。 因此，為了讓您的瀏覽器允許前端 JavaScript 代碼發送您嘗試執行的POST請求， https://hooks.slack.com/services API 端點必須返回一個Access-Control-Allow-Headers響應標頭在其值中包含Content-Type 。

但是該端點不會返回該標頭，因此預檢失敗並且瀏覽器就在那里停止。

通常，當從前端 JavaScript 發布到需要 JSON 的 API 端點時，將Content-Type: application/json標頭添加到請求正是您需要做的和應該做的。 但在這種情況下不是——因為特定的 API 端點沒有正確處理它。

Answer 2

我正在使用axios並且遇到了類似的問題。 對我有用的是將Content-Type標頭設置為application/x-www-form-urlencoded 。 在此線程中找到它： https : //github.com/axios/axios/issues/475看來這會觸發“簡單請求”，因此避免觸發 CORS 預檢。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

哈。