スラックの着信ウェブフック：リクエストヘッダフィールドのコンテンツタイプは、プリフライト応じてアクセス制御 - 許可 - ヘッダによって許可されていない

Question

私はブラウザにフェッチAPIを介してたるみメッセージを投稿しよう：

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); 
}; 

I次のエラーメッセージが表示されます。

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

Slack APIエンドポイントは残念ながらフロントエンドJavaScriptコードからのクロスオリジン要求の処理が壊れているように見えますが、CORSプリフライトOPTIONS要求を処理しないため、唯一の解決策は省略されているようですContent-Typeヘッダー。

あなたのリクエストコードのheaders一部から次を削除する必要があるようなので、それが見えます：'Content-type': 'application/json'部分はCORS preflight OPTIONS requestを行うには、ブラウザをトリガーすること

'Content-type': 'application/json' 

。したがって、ブラウザでフロントエンドのJavaScriptコードでPOSTリクエストを送信できるようにするには、https://hooks.slack.com/services APIエンドポイントでAccess-Control-Allow-Headers応答ヘッダー（Content-Type）を返す必要があります。

しかし、そのエンドポイントはそのヘッダーを返さないため、プリフライトが失敗し、ブラウザがすぐに停止します。

通常、フロントエンドのJavaScriptからJSONが必要なAPIエンドポイントに投稿する場合は、そのリクエストにContent-Type: application/jsonヘッダーを追加するだけで、行う必要があります。しかし、この特定のAPIエンドポイントが正しく処理しないためです。