状況・経緯
Node(express)を使用してAPIを作成。そのAPIを別で立てたローカルサーバーでアクセスしたら以下のようなエラーが出た。
Access to fetch at 'http://localhost:3000/' from origin 'http://127.0.0.1:8080'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
http://127.0.0.1:8080からlocalhost:3000へのアクセスは CORSポリシーによってブロックされていますといわれてしまった・・・
CORSとは
オリジン間リソース共有（Cross-Origin Resource Sharing）のこと。セキュリティ上の理由からブラウザからオリジン間HTTPリクエストを制限している。
オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。
No 'Access-Control-Allow-Origin' header is present on the requested resource. とは
CORS リクエストへのレスポンスが、リソースが現在のオリジン内で操作しているコンテンツによってアクセスできるかどうかを判断するために使われる、必須の Access-Control-Allow-Origin ヘッダーを欠いています。
ヘッダー情報にAccess-Control-Allow-Originがないからダメと怒られているらしい。
解決策
解決するには、
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
CORSを無効にして no-corsモードをセットしろとのこと。
なので、
ヘッダーに
Access-Control-Allow-Origin: *
を追加した。
何をしたのか
自分で用意したサーバーへのアクセスを許可した。
今回の場合、http://127.0.0.1:8080でアクセスしようとしたらエラーが出たのでこのように書くとアクセスが許可される。
Access-Control-Allow-Origin: http://127.0.0.1:8080
また、ワイルドカードである*を使用することであらゆるアクセスを許可することができる。
Access-Control-Allow-Origin: *を使う際の注意点
公開するAPIには使用しても問題ないが、非公開APIには具体的なドメインやドメイン一覧を設定すること。
詳しくは↓
Reason: CORS header 'Access-Control-Allow-Origin' missing
expressでサーバーを立てた場合
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.set('port', port);
// サーバースタート
app.listen(port, () => console.log(`App started on port ${port}.`));
// ドメイン直下(localhost:3000)にアクセスした時の処理
app.get('/', (req, res, next) => {
res.set({ 'Access-Control-Allow-Origin': '*' }); // ここでヘッダーにアクセス許可の情報を追加
// 何らかの処理
});
このような感じになる。
この記事を読んでもCORSがいまいちよく理解できないときは
GIFアニメーションを使って詳しく解説しているこちらの記事がおすすめです。
CORSの仕組みをGIFアニメで分かりやすく解説