CORSエラー、フロントを直しても無駄

結論：CORSはサーバー側で解決する

Access to fetch at 'https://api.example.com' from origin 
'https://example.com' has been blocked by CORS policy

このエラーが出たとき、フロントのコードを直しても意味がない。

サーバーが「このオリジンからのアクセスを許可する」と言わない限り、ブラウザはブロックする。

なぜフロントで解決できないか

CORSはブラウザのセキュリティ機能。

ブラウザがリクエストを送る
サーバーが「許可します」とヘッダーを返す
ブラウザが「OK」と判断してレスポンスを渡す

2の「サーバーが許可を出す」部分がないと、ブラウザはレスポンスをブロックする。

フロントは1しかできない。2はサーバーの仕事。

サーバー側の設定

必要なレスポンスヘッダー

Access-Control-Allow-Origin: https://example.com

このヘッダーがないと、ブラウザはブロックする。

Node.js（Express）

const cors = require('cors');

// 特定のオリジンのみ許可
app.use(cors({
  origin: 'https://example.com',
}));

PHP

header('Access-Control-Allow-Origin: https://example.com');

Nginx

add_header 'Access-Control-Allow-Origin' 'https://example.com';

私がやらかした失敗

APIが動かない → fetchの書き方を変える → 変わらない → headersを追加 → 変わらない

2時間後、「これサーバー側の問題だ」と気づく。

PHPに1行追加して解決。最初から気づいていれば5分で終わっていた。

フロントでできること（開発中のみ）

プロキシを使う

Viteの場合:

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
      },
    },
  },
};

フロントからは/api/dataにアクセス → Viteがhttps://api.example.com/dataに転送。

**本番では使えない。**開発中の回避策。

やってはいけないこと

// ❌ エラーは消えるが、レスポンスが読めなくなる
fetch(url, { mode: 'no-cors' });

CORSエラーは消えるが、レスポンスボディにアクセスできない。意味がない。

Cookieを送る場合

// フロント
fetch(url, { credentials: 'include' });

// サーバーのヘッダー
Access-Control-Allow-Origin: https://example.com  // ワイルドカード不可
Access-Control-Allow-Credentials: true

credentials: 'include'のとき、Access-Control-Allow-Origin: *は使えない。

プリフライトリクエスト

POSTでJSONを送るとき、本番リクエストの前にOPTIONSリクエストが飛ぶ。

サーバーがOPTIONSに応答しないと、本番リクエストが送られない。

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: https://example.com');
    header('Access-Control-Allow-Methods: POST');
    header('Access-Control-Allow-Headers: Content-Type');
    exit;
}

エラーメッセージの読み方

メッセージ	意味
`No 'Access-Control-Allow-Origin' header`	サーバーが許可していない
`not allowed by Access-Control-Allow-Origin`	許可リストにこのオリジンがない
`Preflight response is not successful`	OPTIONSに応答していない

まとめ

CORSエラーはサーバー側で解決する
フロントのコードを直しても無駄
開発中はプロキシで回避
no-corsは解決策にならない
Cookieを送るときは*が使えない