CORS 問題を解決するには、Web サーバー (Apache や Nginx など) またはバックエンド (Django、Go、Node.js など) に適切なヘッダーを追加する必要があります。 、またはフロントエンド フレームワーク (React や Next.js など)。以下は各プラットフォームの手順です:
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>
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.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
Django では、django-cors-headers パッケージを使用して CORS ヘッダーを追加できます。
pip install django-cors-headers
INSTALLED_APPS = [ ... 'corsheaders', ]
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ]
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 では、HTTP ハンドラーで CORS を手動で処理することも、rs/cors などのミドルウェアを使用することもできます。
rs/cors ミドルウェアの使用:
go get github.com/rs/cors
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) }
Express (Node.js) では、cors ミドルウェアを使用できます。
npm install cors
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'); });
React では、CORS はバックエンドによって処理されますが、開発中に API リクエストをプロキシして CORS の問題を回避できます。
{ "proxy": "http://localhost:5000" }
これにより、開発中のリクエストがポート 5000 で実行されているバックエンド サーバーにプロキシされます。
運用環境の場合、バックエンドは CORS を処理する必要があります。必要に応じて、http-proxy-middleware などのツールを使用してさらに制御します。
Next.js では、API ルートで CORS を構成できます。
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' }); }
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', }, ], }, ]; }, };
以上がCORS 問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。