Summary of cross-domain methods supported by js for post requests

This time I will bring you a summary of cross-domain methods for js to support post requests. What are the precautions for js to support cross-domain post requests? 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:

How to view personal information and change password in vue

Summary of methods of embedding JS in HTML documents

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