CORSをざっくり理解し、CORSエラーを解決する

こんなCORSエラーに悩まされていませんか？

バックエンドでAPIを立てて、別途作成したフロントからAPIを叩いた時、こんなエラーが起こることがあります。

こちら、CORSエラーというものです。
今回は、CORSについてざっくり理解してから、CORSエラーの解決方法をまとめました。

CORSとは

CORSとは、Cross-Origin Resource Sharingの略です。CORSは、異なるオリジン間でのWebリソース共有を制御するしくみです。

オリジンとは

ウェブブラウザは、異なるサイト間でデータをやり取りする際に、そのデータの出どころを識別するために「オリジン」を使用します。

例

https://example.com:8080とhttps://another-example.comは、
異なるオリジンになります。異なるオリジンをまたぐデータの通信は、CORSになります。

同一オリジンだとは、セキュリティの問題はあまりありませんが、
CORSは、別のオリジンからアクセスされることになるので、悪意のあるサイトからのアクセスされる場合、セキュリティ的に不安ですよね。
なので、異なるオリジンからAPIを叩こうとすると、通信させないようCORSエラーを出すわけです。

CORSによって起こるセキュリティ事故

CORSはセキュリティ的に問題だと言いましたが、例えば以下のようなセキュリティ事故に遭う可能性が高くなります。

XSS(クロスサイトスクリプティング)

XSSは、悪意のあるスクリプトがウェブページに埋め込まれ、ユーザーのブラウザで実行される攻撃です。

例えば、JavaScriptでエントリーフォームの入力データを引き抜いて、それを別のサイトで表示させてしまうというようなことが起こってしまうことなどが考えられます。

CORSのおかげでXSSが防げている

CORSで弾いてくれるおかげで、ブラウザが別のオリジンからのスクリプトの実行を阻止し、XSS攻撃から保護します。これにより、悪意のあるスクリプトが他のオリジンのデータにアクセスすることを防ぐことができます。

今回のCORSエラーの原因

CORSについてざっくり理解したところで、今回のCORSエラーの原因を説明します。(といっても、今までの説明でわかったかと思いますが、、笑)

今回のCORSエラーの原因は、異なるオリジンAPIを叩いたからです。

CORSエラーの解決方法

API側でCORS設定をすればOKです。APIを叩く側のオリジンを、許可するよう設定します。

API側

以下はNode.jsのExpressフレームワークでの例です。corsというパッケージを使ってます。

const express = require('express');
const cors = require('cors');

const app = express();

// CORSミドルウェアの追加
app.use(cors({
    origin: 'https://許可するオリジン.com',
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], // ここで記載したメソッドを許可する
    optionsSuccessStatus: 200, // 成功時のステータスを200にする
}));

// ルートやAPIの処理が続く...

app.listen(3000, () => {
    console.log('サーバーがポート3000で起動しました');
});

ブラウザ側

ちなみにブラウザ側はこんな感じ

fetch('https://別のオリジン.com/data', {
    method: 'GET',
    mode: 'cors',
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('エラー:', error));

注意点

CORSの設定は注意が必要です。

無闇に色々なオリジンを許可すると、セキュリティが脆弱になるため、信頼できるオリジンだけを許可しましょう。