How to implement js to support cross-domain post requests

This time I will bring you how to implement js support post request Cross-domain, implement js to support post request cross-domain What are the precautions, the following is a practical case, let's come together 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:

This points to the use of call and apply

What should I do if the ip cannot be accessed when myproject builds the project? deal with

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