ホームページ  >  記事  >  ウェブフロントエンド  >  Nodejs クロスドメインを設定する場所

Nodejs クロスドメインを設定する場所

PHPz
PHPzオリジナル
2023-04-17 16:36:08700ブラウズ

Node.js 環境でクロスドメインリクエストを行う場合、リクエストを正常に処理するには特定の構成が必要です。では、クロスドメイン構成は正確にどこで行われるのでしょうか?

まず、クロスドメインリクエストとは何かを理解する必要があります。クロスオリジン リクエストとは、現在のページのソースとは異なる URL にアクセスするときにクライアントによって開始されるリクエストを指します。ブラウザーの同一生成元ポリシーの制限により、そのようなリクエストの送信は禁止されています。 Node.js は Web サーバーとして実行できるため、特別なニーズを満たすためにクロスドメイン構成も必要です。

Node.js でクロスドメイン構成を実行するには、通常、サーバー側の構成とクライアント側の構成という 2 つの方法があります。

  1. サーバー側の構成

Node.js では、cors モジュールを使用してクロスドメイン リクエストを構成できます。 cors モジュールを使用する前に、最初にモジュールをインストールする必要があります:

npm install cors

インストールが完了した後、使用する場合は、モジュールを導入するだけで済みます:

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

const app = express();

app.use(cors());

// ...

このうち、 app.use(cors()) は、すべてのドメインへのアクセスを許可することを意味します。特定のドメインへのアクセスを承認する必要がある場合は、次のメソッドを使用できます。

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

const app = express();

const corsOptions = {
  origin: 'http://example.com'
}

app.use(cors(corsOptions));

// ...

この例では、corsOptionshttp://example.com アドレスは許可されています。クロスオリジンリクエスト。

  1. クライアントでの構成

クライアント ページでクロスドメイン リクエストを開始する必要がある場合は、cors モジュールを使用することもできます。設定用。クライアントで cors モジュールを使用する場合は、最初にモジュールをインストールする必要があります:

npm install cors

インストールが完了したら、使用時にクライアント コードで次の設定を行うことができます:

const axios = require('axios');
const cors = require('cors');

const corsOptions = {
  origin: 'http://example.com'
};

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.post['Access-Control-Allow-Headers'] = 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With';
axios.defaults.headers.post['Access-Control-Allow-Methods'] = 'PUT,POST,GET,DELETE,OPTIONS';

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
});

instance.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

instance.defaults.withCredentials = true;

instance.defaults.transformRequest = [function(data) {
  data = JSON.stringify(data);
  return data;
}];

instance.defaults.transformResponse = [function(data) {
  if (typeof data === 'string' && data.includes('{') && data.includes('}')) {
    data = JSON.parse(data);
  }
  return data;
}];

instance.interceptors.request.use(function(config) {
  config.withCredentials = true;
  return config;
}, function(error) {
  return Promise.reject(error);
});

instance.interceptors.response.use(function(response) {
  return response;
}, function(error) {
  return Promise.reject(error);
});

instance.use(cors(corsOptions)); 

// ...

このうち、instance.use(cors(corsOptions)) は、http://example.com アドレスがクロスドメイン リクエストを行うことが許可されていることを示します。

要約すると、Node.js 環境のクロスドメイン リクエストはサーバー側またはクライアント側で構成できます。実際のシナリオに応じて、クロスドメイン構成の適切な方法を選択する必要があります。

以上がNodejs クロスドメインを設定する場所の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。