0

next.jsのfetch()でGETリクエストにContent-Typeを含めるとリクエスト先によってCORSエラーを出すときと出さないときがあります。わからないのは、CORSエラーを出さない時です。
例えば出さないケースですと下記コードのurl
https://umayadia-apisample.azurewebsites.net/api/persons/Shakespea
を入れた場合です。
考えられる理由があれば教えていただきたいです。

const get = () => {
 fetch(url, {
    method: 'GET',
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json;charset=utf-8"
    }
  })
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error('Error:', error))
}

1 件の回答 1

0

GET で "Content-Type": "application/json;charset=utf-8" があるのが意味不明ですが(不要なはず)、それはとりあえず置いといて・・・

その場合ブラウザからはプリフライトリクエストが出るはずですが(下の画像参照)、多分サーバー側がそれに対応してない(青枠で示した応答ヘッダが返ってこない)のでエラーになるのだろうと思います。

画像の説明をここに入力

プリフライトリクエストが必要になる場合について簡単に書いておきます。メソッドが GET, HEAD, POST のいずれかで、かつ、要求ヘッダが CORS セーフリストリクエストヘッダーの場合はプリフライトリクエストは不要、それ以外はプリフライトリクエストが必要になります。(詳しくは、MDN のドキュメントオリジン間リソース共有を見てください)


【追記】

わからないのは、CORSエラーを出さない時です。
例えば出さないケースですと下記コードのurlに
https://umayadia-apisample.azurewebsites.net/api/persons/Shakespea
を入れた場合です。

「下記コードのurl」はどうなっているかも調べたので書いておきます。

その url のサーバーはプリフライトリクエストに対応してます。質問者さんのコードをコピペしてその url に要求をかけるとプリフライトリクエストが出ます。

CORS の要求側はブラウザの仕事で、プリフライトが必要か否かもブラウザが判断して、下の画像の赤枠で示した CORS に必要な要求を出してくれます。

画像の説明をここに入力

サーバーからは上の画像の青枠で囲った応答ヘッダが返されるので、ブラウザはそれを見て、下の画像の通り再度サーバーに GET 要求を出し、

画像の説明をここに入力

サーバーから返されるデータを取得できます。

画像の説明をここに入力

ちなみに、"Content-Type": "application/json;charset=utf-8" をコメントアウトするとプリフライトリクエストは不要になり、以下のように単純リクエスト(注: 単純リクエストというのは古い CORS 仕様書の用語で、現在 CORS を定義している Fetch 仕様書 ではその用語を使用していないそうです)を出してデータを取得します。

画像の説明をここに入力

ということで、

fetch()でGETリクエストにContent-Typeを含めるとリクエスト先によってCORSエラーを出すときと出さないとき

の違いは、上にも書きましたが、サーバー側がプリフライトリクエストに対応しているか(青枠で示した応答ヘッダが返ってくる)、していないか(青枠で示した応答ヘッダが返ってこない)の違いによるものだと思います。

ダメな場合の url が不明なので当方では検証できませんが。そこは質問者さんの方で調べてください。そのうえで、上に書いた私の回答が違うということであれば、その旨下のコメント欄に書いてください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。