CORS 問題を解決する方法

Barbara Streisand
リリース: 2024-10-01 06:18:29
オリジナル
255 人が閲覧しました

Ways to resolve CORS issues

CORS 問題を解決するには、Web サーバー (Apache や Nginx など) またはバックエンド (Django、Go、Node.js など) に適切なヘッダーを追加する必要があります。 、またはフロントエンド フレームワーク (React や Next.js など)。以下は各プラットフォームの手順です:

1. Web サーバー

アパッチ

CORS ヘッダーは、Apache の構成ファイル (.htaccess、httpd.conf、apache2.conf など)、または特定の仮想ホスト構成内で構成できます。

次の行を追加して CORS を有効にします:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>
ログイン後にコピー
  • 特定のドメインに CORS を適用するには:
  Header set Access-Control-Allow-Origin "https://example.com"
ログイン後にコピー
  • 認証情報が必要な場合:
  Header set Access-Control-Allow-Credentials "true"
ログイン後にコピー

mod_headers モジュールが有効になっていることを確認します。そうでない場合は、次を使用して有効にします:

sudo a2enmod headers
sudo systemctl restart apache2
ログイン後にコピー

Nginx

Nginx では、nginx.conf または特定のサーバー ブロック内で CORS ヘッダーを構成できます。

次の行を追加します:

server {
    location / {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
    }

    # Optional: Add for handling preflight OPTIONS requests
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type";
        return 204;
    }
}
ログイン後にコピー
  • 認証情報が必要な場合:
  add_header Access-Control-Allow-Credentials "true";
ログイン後にコピー

次に Nginx を再起動します。

sudo systemctl restart nginx
ログイン後にコピー

2. バックエンド フレームワーク

ジャンゴ

Django では、django-cors-headers パッケージを使用して CORS ヘッダーを追加できます。

  1. パッケージをインストールします:
   pip install django-cors-headers
ログイン後にコピー
  1. settings.py の INSTALLED_APPS に「corsheaders」を追加します。
   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]
ログイン後にコピー
  1. CORS ミドルウェアを MIDDLEWARE に追加します。
   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       ...
   ]
ログイン後にコピー
  1. settings.py で許可されるオリジンを設定します。
   CORS_ALLOWED_ORIGINS = [
       "https://example.com",
   ]
ログイン後にコピー
  • すべてのオリジンを許可するには:
  CORS_ALLOW_ALL_ORIGINS = True
ログイン後にコピー
  • 認証情報が必要な場合:
  CORS_ALLOW_CREDENTIALS = True
ログイン後にコピー
  • 特定のヘッダーまたはメソッドを許可するには:
  CORS_ALLOW_HEADERS = ['Authorization', 'Content-Type']
  CORS_ALLOW_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
ログイン後にコピー

Go (Golang)

Go では、HTTP ハンドラーで CORS を手動で処理することも、rs/cors などのミドルウェアを使用することもできます。

rs/cors ミドルウェアの使用:

  1. パッケージをインストールします:
   go get github.com/rs/cors
ログイン後にコピー
  1. アプリケーションで使用します。
   package main

   import (
       "net/http"
       "github.com/rs/cors"
   )

   func main() {
       mux := http.NewServeMux()

       // Example handler
       mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
           w.Write([]byte("Hello, World!"))
       })

       // CORS middleware
       handler := cors.New(cors.Options{
           AllowedOrigins:   []string{"https://example.com"}, // Or use * for all
           AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
           AllowedHeaders:   []string{"Authorization", "Content-Type"},
           AllowCredentials: true,
       }).Handler(mux)

       http.ListenAndServe(":8080", handler)
   }
ログイン後にコピー

Node.js (高速)

Express (Node.js) では、cors ミドルウェアを使用できます。

  1. cors パッケージをインストールします。
   npm install cors
ログイン後にコピー
  1. Express アプリにミドルウェアを追加します。
   const express = require('express');
   const cors = require('cors');
   const app = express();

   // Enable CORS for all routes
   app.use(cors());

   // To allow specific origins
   app.use(cors({
       origin: 'https://example.com',
       methods: ['GET', 'POST', 'PUT', 'DELETE'],
       allowedHeaders: ['Authorization', 'Content-Type'],
       credentials: true
   }));

   // Example route
   app.get('/', (req, res) => {
       res.send('Hello World');
   });

   app.listen(3000, () => {
       console.log('Server running on port 3000');
   });
ログイン後にコピー

3. フロントエンドフレームワーク

反応

React では、CORS はバックエンドによって処理されますが、開発中に API リクエストをプロキシして CORS の問題を回避できます。

  1. package.json にプロキシを追加します。
   {
     "proxy": "http://localhost:5000"
   }
ログイン後にコピー

これにより、開発中のリクエストがポート 5000 で実行されているバックエンド サーバーにプロキシされます。

運用環境の場合、バックエンドは CORS を処理する必要があります。必要に応じて、http-proxy-middleware などのツールを使用してさらに制御します。

Next.js

Next.js では、API ルートで CORS を構成できます。

  1. API ルート用のカスタム ミドルウェアを作成します。
   export default function handler(req, res) {
       res.setHeader('Access-Control-Allow-Origin', '*'); // Allow all origins
       res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
       res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');

       if (req.method === 'OPTIONS') {
           // Handle preflight request
           res.status(200).end();
           return;
       }

       // Handle the actual request
       res.status(200).json({ message: 'Hello from Next.js' });
   }
ログイン後にコピー
  1. next.config.js では、応答ヘッダーを変更することもできます。
   module.exports = {
       async headers() {
           return [
               {
                   source: '/(.*)', // Apply to all routes
                   headers: [
                       {
                           key: 'Access-Control-Allow-Origin',
                           value: '*', // Allow all origins
                       },
                       {
                           key: 'Access-Control-Allow-Methods',
                           value: 'GET, POST, PUT, DELETE, OPTIONS',
                       },
                       {
                           key: 'Access-Control-Allow-Headers',
                           value: 'Authorization, Content-Type',
                       },
                   ],
               },
           ];
       },
   };
ログイン後にコピー

ヘッダーを追加する場所の概要:

  • Web サーバー (Apache、Nginx): サーバー構成ファイル (例: .htaccess、nginx.conf) で構成します。
  • バックエンドフレームワーク:
    • Django: django-cors-headers を使用します。
    • Go: ヘッダーを手動で追加するか、rs/cors などのミドルウェアを使用します。
    • Node.js (Express): CORS ミドルウェアを使用します。
  • フロントエンド: 開発時は、CORS の問題を回避するためにプロキシ設定 (React のプロキシや Next.js カスタム ヘッダーなど) を使用しますが、運用環境では常にバックエンドで CORS を処理します。

以上がCORS 問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート