CORS を使用して JavaScript でクロスドメイン POST リクエストを行うにはどうすればよいですか?

JavaScript を介したクロスドメイン POST リクエストの送信

クロスドメイン リクエストは、Web 開発における一般的な課題です。 JavaScript では、クロスドメイン POST リクエストを送信する方法がいくつかありますが、最も簡単な方法の 1 つは、「Cross-Origin Resource Sharing」(CORS) 標準を活用することです。

CORS 構成サーバー

POST リクエストを受信するサーバーで CORS を有効にするby:

1. 次の応答ヘッダーを追加します:

   • Access-Control-Allow-Origin: from.com (from.com を、 request)
   • アクセス制御許可メソッド: POST
   • Access-Control-Max-Age: 1000
   • Access-Control-Allow-Headers: Content-Type、Authorization、X-Requested-With

クロスドメイン POST 経由JavaScript

JavaScript では、フェッチ API を使用してクロスドメイン POST リクエストを送信できます。

fetch('https://to.com/postHere.php', {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ some: 'json' })
})
  .then(response => response.json())
  .then(responseData => {
    console.log(responseData.someKey);
  })
  .catch(error => {
    console.error('POST failed', error);
  });

このコードは、https://to に POST リクエストを送信します。別のオリジン (from.com) からの com/postHere.php。 CORS に必要なヘッダーを設定し、リクエスト本文を JSON として文字列化します。

OPTIONS リクエストの処理

クライアントがクロスドメイン POST リクエストを送信すると、ブラウザは最初にOPTIONS リクエストをサーバーに送信して、サーバーがリクエストをサポートしているかどうかを確認します。サーバーは、POST リクエストが許可されていることを示す適切な CORS ヘッダーでこのリクエストに応答する必要があります。

考慮事項

• このメソッドは、
• リクエストはサーバーに対して 2 つのリクエストを行います: OPTIONS リクエストとその後に続く POST request.
• CORS は、すべてのデバイス、特にモバイル デバイスでは動作しない可能性があります。

以上がCORS を使用して JavaScript でクロスドメイン POST リクエストを行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。