クロスドメイン投稿リクエストをサポートするために js を実装する方法

今回は、ポストリクエストクロスドメインのjsサポートを実装する方法を説明します。ポストリクエストのクロスドメインをサポートするためにjsを実装するための注意点は次のとおりです。

JSONP はクロスドメインを実装します

一般的に使用される jquery はクロスドメイン呼び出しを実装します

$.ajax({
  url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",
  dataType: "jsonp",
  jsonp: "callback",
  context: document.body,
  success: function(data) {
    console.log(data);
  }
});

この呼び出しの実際の実装原理は次のとおりです
Web ページ内で script タグを構築し、src を対応する URL に設定し、対応するコールバックを追加しますパラメータ、次の形式:

要求されたサーバー コードは次のとおりです:

$data   = json_encode(array("id" => "1", "name" => "tom"));
$callback = $_GET["callback"];
echo $callback . "(" . $data . ")";

実際、最終的に返されるコンテンツは js コードの一部です:

jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"}) )

ダン ブラウザは js コードを取得した後、この関数を実行して、ajax リクエスト中に設定された success メソッドのコールバックを実現します。

jsonp実装の欠点

原理を理解すると、jsonp実装のクロスドメインメソッドはpostリクエストをサポートせず、getリクエストのみをサポートできることがわかります。しかし、投稿リクエストをサポートする必要がある場合はどうすればよいでしょうか?サーバー側の設定について話しましょう。

サーバー側の設定はクロスドメインをサポートします

主に Access-Control-Allow-Origin ヘッダー パラメーター。これは、どのオリジン リクエストが許可されるかを指定するために使用されます。サーバー コードは次のとおりです:

// 表示支持所有来源的域进行请求
// 实际在操作过程中可以设置为指定域
header('Access-Control-Allow-Origin:*');
$data = json_encode(array("id" => "1", "name" => "tom"));
echo $data;

対応する JS コード:

$.ajax({
  type: "POST",
  url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/header.php",
  dataType: "json",
  success: function(data) {
    console.log(data);
  }
});

は投稿リクエストをサポートできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

これは call と apply の使用を示しています

webpack+myproject でプロジェクトをビルドするときに IP にアクセスできない場合の対処方法

以上がクロスドメイン投稿リクエストをサポートするために js を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。