ホームページ > ウェブフロントエンド > jsチュートリアル > ページの更新や応答の解析を行わずに、JavaScript でクロスドメイン POST リクエストを行うにはどうすればよいですか?

ページの更新や応答の解析を行わずに、JavaScript でクロスドメイン POST リクエストを行うにはどうすればよいですか?

Susan Sarandon
リリース: 2025-01-02 13:52:39
オリジナル
243 人が閲覧しました

How Can I Make Cross-Domain POST Requests in JavaScript Without Page Refresh or Response Parsing?

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

問題:

を使用してクロスドメイン POST リクエストを実行する方法ページを更新したり、応答を要求したりしない JavaScript parse?

解決策:

クロスオリジン リソース共有 (CORS) について

クロスドメイン通信を促進するには、 CORS はサーバーに実装される標準です。サーバーに応答ヘッダーを設定することで、特定のドメインに独自のドメイン上のリソースへのアクセス許可を付与できます。

サーバー側の構成 (PHP を使用):

  1. ターゲットの PHP ファイル (例: postHere.php) に次の内容を含めます。コード:

1

2

3

4

5

6

7

8

9

10

<?php

switch ($_SERVER['HTTP_ORIGIN']) {

    case 'http://from.com': case 'https://from.com':

    header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);

    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

    header('Access-Control-Max-Age: 1000');

    header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

    break;

}

?>

ログイン後にコピー

これにより、from.com のスクリプトがクロスドメイン POST、GET、および OPTIONS リクエストを行うことができるようになります。

クライアントサイド AJAX リクエスト ( jQuery の使用):

  1. AJAX をセットアップするrequest:

1

2

3

4

5

6

7

8

9

10

11

12

13

$.ajax({

  type: 'POST',

  url: 'https://to.com/postHere.php',

  crossDomain: true,

  data: '{&quot;some&quot;:&quot;json&quot;}',

  dataType: 'json',

  success: function(responseData, textStatus, jqXHR) {

    var value = responseData.someKey;

  },

  error: function (responseData, textStatus, errorThrown) {

    alert('POST failed.');

  }

});

ログイン後にコピー

Process:

  1. ブラウザは、POST が許可されているかどうかを確認する OPTIONS リクエストを送信します。
  2. サーバー特定のユーザーにアクセス許可を付与する Access-Control ヘッダーで応答します。
  3. ブラウザは実際の POST リクエストを送信します。
  4. サーバーはリクエストを処理し、レスポンスを返します。

考慮事項:

  • クロスオリジンを許可する場合は、適切なセキュリティ予防措置が講じられていることを確認してください
  • モバイル ブラウザは通常、クロスドメイン POST をサポートしません。
  • 二重リクエストの潜在的なオーバーヘッドとセキュリティへの影響を考慮してください。
  • 常に適切な CORS ヘッダーを返します。 OPTIONS リクエストだけでなく、レスポンスも同様です。

以上がページの更新や応答の解析を行わずに、JavaScript でクロスドメイン POST リクエストを行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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