36
Help us understand the problem. What are the problem?

posted at

updated at

CORSエラーが出てしまったらヘッダー情報を追加しよう

状況・経緯

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 リクエストを実行します。

オリジン間リソース共有 (CORS)

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でサーバーを立てた場合

server.js
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アニメで分かりやすく解説


参考
オリジン間リソース共有 (CORS)
CORS のエラー
逆引きメモ:expressの使い方

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
36
Help us understand the problem. What are the problem?