ウェブ開発をしていて、「CORSエラー」って表示されたけどこれはなんだろう？
これは、外部リソースを読み込むときのセキュリティ制限が原因です。
対処法がわからないと、作業がうまく進まなくなることもありますよね。
この記事では、実際に発生したCORSエラーの例をもとに、初心者にもわかりやすく原因と解決策を紹介します。
CORSエラーの仕組みや、すぐに試せるコード例も紹介するので、困ったときにぜひ参考にしてください！
CORSエラー（コースエラー）とは？
CORS（Cross-Origin Resource Sharing）エラーは、異なるオリジン（ドメイン）からリソースを取得する際に、ブラウザがセキュリティ上の理由でそのリソースの読み込みをブロックした場合に発生します。
例えば、あなたのWebサイトが example.com で、外部リソースを cdn.example.net から読み込もうとしたとき、サーバーが適切なCORSヘッダーを返さないと、ブラウザはリソースの読み込みを拒否します。
このとき、開発者ツールで「CORSエラー」と表示されることが多いです。
CORSエラーの具体例とその意味
CORSエラーにはいくつかのパターンがあります。
ここでは、実際に開発者ツールのコンソールに表示されるエラーメッセージを例に、その意味と解決方法をわかりやすく解説します。
1.CSSスタイルシートへのアクセスエラー（私の場合）
開発中に遭遇したのは、CSSのスタイルシートにアクセスできない というエラーでした。
エラーメッセージの例
SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rulesエラーの意味
このエラーは、JavaScriptがスタイルシートのルール（cssRules）にアクセスしようとした際、セキュリティ制限によってブロックされた場合に発生します。
主な原因
- スタイルシートが異なるドメイン（クロスオリジン）にある
- 同一ドメイン内でも適切な権限が設定されていない
解決策
- クロスオリジンのスタイルシートを使用している場合
→ サーバー側で CORS（Cross-Origin Resource Sharing）の設定を適切に行う - 同一ドメイン内で発生している場合
→ JavaScriptのアクセス方法や権限設定を見直す
2.外部APIへのリクエストエラー（他のケース）
CORSエラーはCSSだけでなく、APIへのリクエスト時にも発生することがあります。
エラーメッセージの例
Access to XMLHttpRequest at 'https://example.com/data' from origin 'https://yourwebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.エラーの意味
こちらのエラーは、yourwebsite.com から example.com のリソースにアクセスしようとした際、example.com 側で CORSの許可設定（Access-Control-Allow-Originヘッダー）が行われていない ためにブロックされたことを意味します。
主な原因
example.comが他のサイト（yourwebsite.com）からのリクエストを許可していない- APIサーバー側で適切なCORSヘッダーが設定されていない
解決策
- API提供元の設定を確認
→example.com側でAccess-Control-Allow-Originを適切に設定してもらう必要があります。 - プロキシサーバーを利用
→ サーバー側でAPIリクエストを中継することで、CORS制限を回避できます。 - クライアント側でJSONPやCORS対応のリクエスト方法を検討
→ APIの仕様に応じたリクエスト方法を選びましょう。
最初に試すべき簡単な対処法（CDNリソースの場合）
もし外部CDN（例：Google Fonts、FontAwesome、Normalize.css など）を使用していて、CORSエラーが発生した場合、まず試してほしい簡単な解決方法があります。
外部リソースの読み込みタグに crossorigin="anonymous" 属性を追加することです。
<!-- Normalize.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" crossorigin="anonymous">
<!-- FontAwesomeのCDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- Webフォント -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet" crossorigin="anonymous">どうしてこれで解決するのか？
crossorigin="anonymous" 属性を追加することで、ブラウザはCDNからのリソースを読み込む際に、セキュリティ上の制限を解除してアクセスを許可します。
これにより、CORSエラーを回避することができます。
use-credentials を使った対処法
もし、外部リソースに対して認証情報（CookieやHTTP認証など）を送信したい場合は、crossorigin="use-credentials" を使用します。
<!-- 認証情報を送信する場合 -->
<link rel="stylesheet" href="https://example.com/styles.css" crossorigin="use-credentials">use-credentials の意味
crossorigin="use-credentials" 属性は、認証情報（CookieやHTTP認証）をリクエストに含めることを許可します。
ただし、この設定を使う場合、外部サーバー側もCORS設定で Access-Control-Allow-Credentials: true を返す必要があります。
それでも解決しない場合
上記の方法を試しても問題が解決しない場合は、別の原因が考えられます。
以下のようなケースをチェックしてみましょう。
サーバー側でCORS設定が必要な場合
CDNやAPIなどの外部リソースを読み込もうとしたときにCORSエラーが出る場合、サーバー側の設定が足りていない可能性があります。
特に、サーバーが Access-Control-Allow-Origin ヘッダーを正しく設定していないと、ブラウザ側でリクエストがブロックされます。
例えば、APIからデータを取得する際にCORSエラーが発生する場合、サーバー側で以下のような設定を追加する必要があります。
Access-Control-Allow-Origin: *この設定を入れることで、どのオリジン（アクセス元）からでもリクエストを受け付けるようになります。
どこに書けばいい？
Access-Control-Allow-Origin: * の設定をどこに入れるかは、使っているサーバー環境によって異なります。
- レンタルサーバー（Apache）なら
.htaccess - Nginx を使っているなら
nginx.conf - Node.js（Express）を使っているなら
app.use()で設定
レンタルサーバー（Apache）を使っている場合
Apache を使っているなら、 .htaccess ファイルに以下を追加することで設定できます。
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>.htaccess の場所は？
あなたのサイトの ルートディレクトリ（public_html や www） に .htaccess があるので、それを編集します。なければ作成します。
自作のNode.js（Express）サーバーを使っている場合
もし Node.js（Express）を使っているなら、CORS の設定をミドルウェアとして追加します。
const express = require('express');
const app = express();
// CORS設定
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // どこからのアクセスでも許可
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 許可するHTTPメソッド
res.header('Access-Control-Allow-Headers', 'Content-Type'); // 許可するヘッダー
next();
});
app.get('/api/data', (req, res) => {
res.json({ message: "Hello World!" });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});このようにCORSの設定を入れておけば、クライアント側からのリクエストがブロックされずに通るようになります。
JavaScript 側での対処方法
もしサーバー側が適切に設定されているのにCORSエラーが出る場合、JavaScriptのリクエスト設定を見直してみましょう。
例えば fetch （JavaScript でデータを取得するための関数）を使うときに mode: 'cors' を指定すると、CORSリクエストとして扱われるようになります。
例：fetch APIの使用例
fetch('https://example.com/data', {
method: 'GET',
mode: 'cors' // 'cors'モードでCORSを有効にする
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('Error:', error));mode: ‘cors’ の意味
この設定を追加することで、ブラウザは外部リソースへのアクセスをCORSとして処理します。
- サーバー側がCORSを正しく設定している場合 → リクエスト成功
- サーバー側がCORSを設定していない場合 → エラー発生
もし mode: 'cors' を入れても解決しない場合は、サーバー側の設定を見直してみましょう。
まとめ
CORSエラーは、外部リソースを使うときによく発生する問題ですが、原因を知ればちゃんと対処できます！
まずは crossorigin="anonymous" や crossorigin="use-credentials" など簡単な設定を試してみましょう。
意外とこれだけで解決することもあります。
それでもうまくいかない場合は、サーバー側のCORS設定やAPIのレスポンスヘッダー に問題がある可能性があります。
その場合は、サーバーの設定を見直したり、プロキシを活用する方法も検討してみてください。
コメント