CORS 問題を解決する方法

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 サイトの他の関連記事を参照してください。