chrome · JavaScript
メッセージ
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
何を意味するか
要求はサーバに届き応答も返ってきたのに、その応答にこの出所を許す見出しが無く、ブラウザが JavaScript へ渡すことを拒んだという意味です。この規則を守るのはブラウザだけなので、同じ URL を curl で叩けば通ります — だからサーバは無事でブラウザだけが壊れているように見えます。直す場所は常にサーバ側で、応答に Access-Control-Allow-Origin: http://localhost:3000 を付けることです。フロントエンド側にできることは何もなく、他人のサーバなら自分のサーバを経由して呼ぶプロキシが唯一の道です。Allow-Origin: * は cookie を送る要求では通らず、その場合は出所を正確に書いて Allow-Credentials も有効にする必要があります。
直しかた
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- 出す道具
- chrome
- JavaScript
- 15
ブラウザと node の誤りは、たいてい何が壊れたかだけを告げ、なぜその値がそうなったかは告げません — undefined を読んだ、関数ではなかった、JSON ではなかった。ですから直す場所は投げた行ではなくその値を作った上流であり、?. や既定値でその行だけ黙らせると、同じ問題がもっと遠くで、もっと分かりにくい形で戻ってきます。
エラーメッセージの読み方
- 一行目から読みます。下に行くほど道具の内部の話で、原因はたいてい一番上に書かれています。
- ファイル名と行番号があればそこが出発点です — スタックの最上段ではなく、自分が書いたファイルが出てくる一番上の行です。
- 文句はそのまま検索します。ただし自分のパスや変数名は消します — その部分が検索を邪魔します。
- 同じ事情が道具の版ごとに違う言い方で出ます。結果が合わないときは版番号も入れてみます。
- 直す命令を貼る前に、その命令が何を捨てるかを確かめます。取り消せないものが混ざっています。
よくある質問
Q. Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. はどういう意味ですか。
要求はサーバに届き応答も返ってきたのに、その応答にこの出所を許す見出しが無く、ブラウザが JavaScript へ渡すことを拒んだという意味です。この規則を守るのはブラウザだけなので、同じ URL を curl で叩けば通ります — だからサーバは無事でブラウザだけが壊れているように見えます。直す場所は常にサーバ側で、応答に Access-Control-Allow-Origin: http://localhost:3000 を付けることです。フロントエンド側にできることは何もなく、他人のサーバなら自分のサーバを経由して呼ぶプロキシが唯一の道です。Allow-Origin: * は cookie を送る要求では通らず、その場合は出所を正確に書いて Allow-Credentials も有効にする必要があります。
Q. どう直しますか。
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data — 実行する前に、この命令が何を捨てるかを上の説明で確かめてください。
Q. どの道具が出すエラーですか。
chrome です。JavaScriptの仲間で、文句は23語です。