Summary of js cross-domain methods that support post requests

This time I will bring you a summary of js cross-domain methods that support post requests. What are the precautions that support post requests for js cross-domains? The following is a practical case. Let’s take a look. take a look.

JSONP cross-domain implementation

Commonly used jquery to implement cross-domain calls

$.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);
  }
});

The actual implementation principle of this call is
Construct a script tag in the web page, and Set src to the corresponding url, and add the corresponding callback parameter, in the following format:

The requested server code is as follows:

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

In fact, the final returned content is a paragraph js code:

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

When the browser obtains this js code This function will be executed later to implement the success method set when calling back the ajax request.

Disadvantages of jsonp implementation

After understanding the principle, you know that the cross-domain method of jsonp implementation does not support post requests and can only support get requests. But what if you need to support post requests? Let’s talk about the server-side settings.

Server-side settings support cross-domain

Mainly the Access-Control-Allow-Origin header parameter, which is used to specify which source of domain requests are allowed. The server code is as follows:

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

The corresponding js code:

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

can support post requests.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What are the ways to use js (with code)

How to dynamically introduce JS files

The above is the detailed content of Summary of js cross-domain methods that support post requests. For more information, please follow other related articles on the PHP Chinese website!