Node.jsでPOSTメソッド経由で送信されたクロスオリジンリクエストを受信する方法

フロントエンド テクノロジーの急速な発展に伴い、Web 開発も複雑になり、変化しやすくなりました。特に、異なるドメイン名からデータをリクエストする必要がある場合、クロスドメインの問題が発生します。この記事では、Node.js を使用して、POST メソッドを通じて送信されたクロスドメイン リクエストを受信する方法を紹介します。

まず第一に、クロスドメインの問題は、ブラウザーの同一生成元ポリシーによって引き起こされます。同一生成元ポリシーは、異なるドメイン名、異なるプロトコル、および異なるポートを持つスクリプトが相互にデータを取得できないことを意味します。これは、ページが他のドメイン名からデータを取得する必要がある場合、エラーが報告されることを意味します。この問題を解決するには、何らかの手段を使用して同一生成元ポリシーをバイパスする必要があります。

クロスドメインの問題を解決する 1 つの方法は、CORS (Cross-Origin Resource Sharing) テクノロジーを使用することです。 CORS を使用すると、Ajax を通じてリソースにアクセスできるドメイン名を応答で明示的に指定できます。ただし、API サーバーが CORS を実装していない場合、またはサーバーの構成を変更できない場合は、問題を解決するために他の方法を試す必要があります。

一般的な方法は、JSONP テクノロジを使用することです。 JSONP はページ内にスクリプト タグを動的に作成し、そのタグを通じてクロスドメイン データを要求します。このタグの src 属性は、JSON データを返す API サーバー上の JavaScript ファイルを指します。 JSONP はクロスドメインの問題を解決しますが、送信できるのは GET リクエストのみであり、POST リクエストは送信できません。

したがって、クロスドメイン POST リクエストを実装するには別の方法が必要です。以下は、Node.js を使用してクロスドメイン POST リクエストを実装する例です。

まず、Node.js の http モジュールを使用して Web サーバーを作成し、Web サーバーからの POST リクエストをリッスンする必要があります。 client:

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.method === 'POST') {
    let body = '';
    req.on('data', data => {
      body += data;
    });
    req.on('end', () => {
      console.log(body);
      res.end();
    });
  }
});
server.listen(8080);

この単純な Web サーバーは、ポート 8080 でクライアントからの POST リクエストをリッスンし、リクエスト本文をコンソールに出力します。

次に、クライアントで XMLHttpRequest オブジェクトを使用して POST リクエストを送信する必要があります。ただし、クロスドメインの問題のため、リクエストを API サーバーに直接送信することはできません。したがって、まずクライアント側でプロキシ サーバーを作成し、次にプロキシ サーバーにリクエストを転送させる必要があります。

プロキシ サーバーのコードは次のとおりです。

const http = require('http');

const clientReq = http.request({
  method: 'POST',
  hostname: 'yourapi.com',
  path: '/path/to/api',
  headers: {
    'Content-Type': 'application/json'
  }
}, (res) => {
  res.on('data', (data) => { /* do something */ });
});

clientReq.on('error', (error) => { /* handle error */ });

process.stdin.on('data', (chunk) => {
  clientReq.write(chunk);
});

process.stdin.on('end', () => {
  clientReq.end();
});

このプロキシ サーバーは、標準入力から読み取られたリクエストを API サーバーに転送します。

最後に、クライアント上でプロキシ サーバーを起動し、POST リクエストをプロキシ サーバーに送信することで、クロスドメイン POST リクエストを実装する必要があります。サンプル コードは次のとおりです。

const http = require('http');
const querystring = require('querystring');

const postData = querystring.stringify({
  'msg': 'Hello World!'
});

const options = {
  hostname: 'localhost',
  port: 8080,
  path: '/proxy',
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Length': Buffer.byteLength(postData)
  }
};

const req = http.request(options, (res) => {
  res.setEncoding('utf8');
  res.on('data', (chunk) => {
    console.log(`BODY: ${chunk}`);
  });
  res.on('end', () => {
    console.log('No more data in response.')
  })
});

req.on('error', (e) => {
  console.error(`problem with request: ${e.message}`);
});

// 请求的数据
req.write(postData);
req.end();

このコード スニペットは POST リクエストをプロキシ サーバーに送信し、プロキシ サーバーはそのリクエストを API サーバーに転送します。 API サーバーから返された応答は、プロキシ サーバーによってクライアントに転送されます。

要約: クロスドメインの問題は Web 開発における重要な問題であり、問​​題を解決するには何らかの技術的手段を講じる必要があります。この記事では、Node.js を使用してクロスドメイン POST リクエストを受信し、プロキシ サーバーを使用して同一生成元ポリシーをバイパスする方法を紹介します。この記事がお役に立てば幸いです。

以上がNode.jsでPOSTメソッド経由で送信されたクロスオリジンリクエストを受信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。