ホームページ > ウェブフロントエンド > フロントエンドQ&A > Node.js を使用してクロスドメインリクエストを許可するように設定する方法

Node.js を使用してクロスドメインリクエストを許可するように設定する方法

PHPz
リリース: 2023-04-05 09:40:27
オリジナル
1873 人が閲覧しました

Node.js は、サーバー側アプリケーションおよび API を構築するための非常に人気のある JavaScript ランタイム環境です。 Cross-Origin Resource Sharing (CORS) は、Web アプリケーションを構築する場合、または RESTful API に基づいた JavaScript アプリケーションを開発する場合に不可欠な機能です。 CORS を使用すると、ブラウザーは、クロスドメインの詳細を知らなくても、プロキシ サーバーを使用しなくても、異なるドメイン名または異なるポートからリソースを要求できます。この記事では、Node.js を使用してクロスドメイン リクエストを許可するように設定する方法について説明します。

  1. クロスドメイン リソース共有とは何ですか?

クロスオリジン リソース共有 (CORS) は、Web アプリケーションのセキュリティ メカニズムであり、Web アプリケーションが異なるドメイン名、異なるポート、または異なるプロトコルからリソースを要求し、応答できるようにします。たとえば、JavaScript と AJAX を使用してあるドメインから別のドメインにデータをリクエストする場合、クロスドメイン リクエストを処理する必要があります。ブラウザーの同一オリジン ポリシーにより、ブラウザーは通常、他のドメインからのリソースのリクエストを許可しません。これはセキュリティ リスクとなります。

  1. Node.js を使用してクロスドメイン リクエストを許可するように設定する

Node.js 環境では、CORS モジュールを使用してクロスドメイン リクエストを許可するように設定できます。 -ドメインリクエスト。 CORS モジュールは、クロスドメイン リクエストを処理するためのミドルウェアを提供します。npm コマンドを使用してモジュールをインストールできます:

npm install cors
ログイン後にコピー

インストール後、アプリケーションで CORS を使用できます。簡単な例を次に示します。

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

app.use(cors());

app.get('/api/data', (req, res) => {
  // 处理 GET 请求
});

app.post('/api/data', (req, res) => {
  // 处理 POST 请求
});

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

上の例では、Express モジュールと CORS モジュールを導入し、app.use(cors()) ステートメントを使用して Express アプリケーションでそれらを有効にしました。コルス。これにより、各リクエストを個別に処理する必要がなく、GET、POST などのタイプのリクエストを任意のソースから実行できるようになります。

  1. 高度な使用方法

さらに制御と柔軟性が必要な場合は、CORS モジュールが提供する構成オプションを使用できます。以下は一般的に使用される詳細設定の一部です:

  • origin: 許可されるリクエスト ソースを指定します。デフォルトは ## です。つまり、すべてのソースが受け入れられます。 。
  • methods: 許可される HTTP リクエスト メソッドを指定します。デフォルトは 'GET,HEAD,PUT,PATCH,POST,DELETE' です。
  • allowedHeaders: 許可されるリクエスト ヘッダー配列を指定します。デフォルトは空の配列です。つまり、すべてのリクエスト ヘッダーが受け入れられます。
  • exusedHeaders: クライアントに公開される応答ヘッダーの配列を指定します。デフォルトは空の配列です。
  • credentials: クロスドメイン Cookie の受信を許可するように指定します。デフォルトは false です。
  • maxAge: プリフライト リクエストの有効期間 (秒) を指定します。デフォルトは 86400 (つまり 1 日) です。
  • preflightContinue: プリフライト要求の処理を続行するかどうかを指定します。デフォルトは false です。

次にいくつかの例を示します:

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

app.use(cors({
  origin: 'http://localhost:8080',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  exposedHeaders: ['Content-Length', 'X-Foo', 'X-Bar'],
  credentials: true,
  maxAge: 86400,
  preflightContinue: false
}));

app.get('/api/data', (req, res) => {
  // 处理 GET 请求
});

app.post('/api/data', (req, res) => {
  // 处理 POST 请求
});

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

上の例では、cors() の構成オプションを使用して、許可されるリクエスト ソースを指定しました。クロスドメインCookieなどを受信するためこれらのオプションはケースバイケースで設定できます。

  1. 概要

この記事では、Node.js を使用してクロスオリジン リクエストを許可するように設定する方法について説明しました。 CORS は、クロスドメイン要求を許可する非常に重要な Web アプリケーション セキュリティ メカニズムであり、Web アプリケーション間のデータ通信をよりシンプルかつ安全にします。 Node.js を使用してアプリケーションを構築する場合、CORS モジュールを使用してクロスオリジン リクエストを簡単に処理できます。

以上がNode.js を使用してクロスドメインリクエストを許可するように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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