CORS 問題の処理: 完全ガイド

 

Cross-Origin Resource Sharing (CORS) は、Web アプリケーションが Web ページを提供したドメインとは異なるドメインからリソースを要求できるようにするメカニズムです。これは最新の Web アプリケーションにとって不可欠な機能ですが、特にセキュリティ ポリシーによってリクエストがブロックされている場合には、複雑な問題が発生する可能性もあります。このガイドでは、CORS とは何か、CORS が重要な理由、一般的な問題、フロントエンド開発で CORS を処理するためのベスト プラクティスについて説明します。
 

CORSとは何ですか?

CORS は、悪意のある Web サイトが許可なく他のドメインのリソースにアクセスすることを防ぐためにブラウザーによって実装されるセキュリティ機能です。 HTTP ヘッダーを使用して、あるオリジン (ドメイン) からのリクエストが別のオリジンのリソースにアクセスできるかどうかを決定します。
基本的に、アプリやすべてが悪意のあるプログラムやウイルスなどから保護されるように、あるドメインが別のドメインのデータにアクセスすることはできません。この場合、サーバーは CORS を使用して構成された許可されたドメインの詳細を知っている必要があります。
 

主要な CORS ヘッダー

1. Access-Control-Allow-Origin: リソースにアクセスできるオリジンを指定します。
    

2. Access-Control-Allow-Methods: どの HTTP メソッド (GET、POST など) を許可するかを指定します。
    

3. Access-Control-Allow-Headers: 実際のリクエスト中に使用できる HTTP ヘッダーを指定します。
    

4. Access-Control-Allow-Credentials: 資格情報フラグが true の場合に、リクエストに対する応答を公開できるかどうかを示します。
    

5. Access-Control-Expose-Headers: 応答の一部として公開できるヘッダーを指定します。
    

6. Access-Control-Max-Age: プリフライト リクエストの結果をキャッシュできる期間を示します。
    

CORS が重要な理由

CORS はセキュリティにとって重要であり、機密情報への不正アクセスを防ぎます。ただし、厳格な CORS ポリシーは正当な API リクエストを妨げ、Web アプリケーションで機能上の問題を引き起こす可能性もあります。 CORS を理解し、適切に構成することは、セキュリティと機能性の両方を確保するために不可欠です。
 

CORS の一般的な問題

1. CORS ポリシーによってブロックされています: これは、サーバーに適切な CORS ヘッダーが含まれていない場合に発生します。
    

2. プリフライト リクエストの失敗: プリフライト リクエスト (OPTIONS) が作成され、サーバーが正しく応答しない場合。
    

3. 認証情報付きリクエスト: Cookie または認証ヘッダーが含まれる場合、サーバーは認証情報を明示的に許可する必要があります。
    

CORS を処理するためのベスト プラクティス

この記事では、Express ミドルウェアとして簡単に渡すことができ、React でも使用できる cors npm ライブラリを使用します
まず、コマンド

を実行して cors をインストールします。

npm install cors

1. サーバー側の構成  

CORS 問題を処理する最も効果的な方法は、クロスオリジン要求を許可するようにサーバーを構成することです。最も最適な方法は、フロントエンド (React.js) がバックエンドとシームレスに通信できるようにサーバー側で CORS を構成することです。これには、いくつかのプロパティの設定が含まれます
 

例: Express を使用した Node.js
 

const express = require('express');
const cors = require('cors');
const app = express();

const corsOptions = {
  origin: 'http://example.com', // specify the allowed origin
  methods: 'GET,POST,PUT,DELETE', // allowed methods
  allowedHeaders: 'Content-Type,Authorization', // allowed headers
  credentials: true, // allow credentials
};

app.use(cors(corsOptions));

app.get('/api/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for only example.com.' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

メソッドには * を使用し、すべてのメソッドまたはヘッダーを許可するには allowedHeaders を使用できます

元のプロパティ:

// specify the allowed origin (single domain),
origin: 'http://example.com',

// configure cors to set the origin to the request origin 
origin:true 

// set multiple domains
origin:["http://example.com","https://demo.com"] 

1. フロントエンドでの CORS の処理  

サーバーを制御しない場合、または開発中に迅速な解決策が必要な場合は、フロントエンドで CORS の問題を処理できます。
 

例: React でのプロキシの使用
 

React を使用する場合、package.json でプロキシを設定して API リクエストをバックエンド サーバーにリダイレクトし、CORS の問題を回避できます。
 

{
  "name": "your-app",
  "version": "1.0.0",
  "proxy": "http://localhost:5000"
}

結論

CORS 問題の処理は開発の重要な部分です。 CORS メカニズムを理解し、このガイドで概説されているベスト プラクティスを実装することで、Web アプリケーションの安全性を確保しながら、さまざまなドメイン間で正しく機能することができます。サーバーの構成、プロキシのセットアップ、またはサードパーティのサービスの使用のいずれを行う場合でも、これらの戦略は CORS を効果的に管理するのに役立ちます。
クイックフィックスは開発やテストには役立つかもしれませんが、運用環境で CORS を処理する最も信頼できる方法はサーバー側の適切な構成であることに注意してください。
 

Dualite の詳細と使用を開始するには、公式 Web サイトをご覧ください

以上がCORS 問題の処理: 完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。