Node.jsのクロスドメイン設定方法を紹介した記事

インターネットの発展に伴い、フロントエンドとバックエンドの分離傾向がますます顕著になってきています。フロントエンドとバックエンドの分離開発では、フロントエンド ページがバックエンド API インターフェイスをリクエストすると、クロスドメインの問題により多くの不便が生じます。この記事ではNode.jsのクロスドメイン設定方法を紹介します。

1. クロスドメインとは

1.1 同一生成元ポリシーとは

Web セキュリティの分野では、同一生成元ポリシーとは次のことを指します。 、ドメイン名とポート番号が必要です。あるソースのドキュメントは、それらがまったく同じである場合にのみ、別のソースからアクセスできます。簡単に言うと、ページ内の JavaScript は、それ自体と同じソースからのドキュメントのみを読み取り、操作できます。

1.2 クロスドメインとは

ドメイン名 A の Web ページがスクリプトを通じてドメイン名 B のリソースにアクセスするとします。この状況をクロスドメインと呼びます。

2. ドメイン間の Node.js 設定

2.1 Cors モジュールのインストール

Cors は、クロスドメイン アクセスを可能にする Node.js モジュールです。インストールさえしておけば、クロスドメインの問題を簡単に解決できます。

npm install cors

2.2 Node.js での Cors モジュールの使用

Express フレームワークでは、cors を直接使用してクロスドメインの問題を解決できます。

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

上記のコードは、プロジェクト内のすべてのルートで CORS を有効にします。特定のルートでのみ有効にしたい場合は、次のコードを使用できます:

const express = require('express');
const cors = require('cors');
const app = express();
const router = express.Router();

const corsOptions = {
    origin: 'http://example.com', // 允许访问的域名
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
};

router.get('/', cors(corsOptions), function(req, res) {
    //...
});

app.use('/', router);

2.3 カスタム クロスドメイン設定

より詳細なクロスドメイン設定が必要な場合は、cors のさまざまなオプションを使用してカスタマイズできます。よく使用されるオプションは次のとおりです:

const corsOptions = {
    origin: 'http://example.com', // String: 允许访问的域名，可以是字符串或正则表达式
    methods: ['GET', 'POST'], // Array: 允许的HTTP请求方法
    allowedHeaders: ['Content-Type'], // Array: 允许使用的自定义Header
    exposedHeaders: ['Content-Type'], // Array: 允许客户端访问的响应头
    credentials: true, // Boolean: 是否发送Cookies
    maxAge: 86400 // Number: 预检请求缓存时间，单位秒
};
app.use(cors(corsOptions));

3. 概要

Node.js は、クロスドメインの問題を簡単に解決できる cors モジュールを提供します。 Express フレームワークでは、たった 1 行のコードで CORS を有効にすることができます。同時に、より柔軟なニーズに合わせてクロスドメイン設定をカスタマイズすることもできます。

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