Front-end learning – Across domains

The same-origin policy

• The same origin policy is a security policy of the browser. The same domain name, protocol, and port are the same
• Under the same-origin policy, only same-origin addresses can request each other through AJAX.
• Same or different source refers to the relationship between two addresses. Requests between different source addresses are called cross-domain requests

homologous

• http://www.example.com/detail.htmlCompare with the following address

Under the same origin policy, browsers do not allow Ajax to get server data across domains

Cross-domain solutions

JSONP

• JSON with Padding is a technique for sending cross-domain requests using script tags.
• The principle is to request an address on the server side with the help of script tags on the client side
• The address returns a JavaScript script with a global function call
• In the calling function, data that would otherwise be returned to the client is passed to the function as arguments
• This allows the client function to retrieve the data that the server originally wanted to return

Demo server

      
    // We need to dynamically obtain the function name of the callback function in order to keep the function name in the data transferred in the background consistent with that in the foreground
    $callback = $_GET["callback"];
    echo $callback.'({"name":"tom","age":18,"class":1})';
? >
Copy the code

Demo client

// Dynamically generate script tags
var script = document.createElement("script");
script.src = "http://new.com/data.php?callback=fun";

// Add it inside the head tag
var head = document.getElementsByTagName("head") [0];
head.appendChild(script);

// The callback function defined by the client. The internal data argument accepts data from the server
function fun(data){
  // By calling the function, you can process the data in the background
  console.log(data);
}
Copy the code

JSONP can only send GET requests and SONP uses script tags that have nothing to do with the XMLHttpRequest that AJAX provides

The json in jQuery

• JQuery uses $.ajax()
• To use JSONP in jQuery is to set dataType to JSONP

$(".btn").click(function () {
  // Send cross-domain Ajax requests
  $.ajax({
    url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web".type: "GET".dataType: "jsonp".jsonp: "cb".// This property sets the parameter name of the callback function (it must be the same as the callback parameter name of the background interface).
    jsonpCallback: "abc".// The name of the callback function automatically assigned by jQ is renamed
    data: {"wd": "ajax"},
    success: function (data) {
      console.log(data)
    }
  })
})
Copy the code

CORS

• Cross Origin Resource Share: Cross-domain Resource sharing
• This approach requires no client changes (the client does not have to change the code), but simply adds an Access-Control-Allow-Origin response header when the requested server responds, indicating whether the resource allows a domain request.
• Access-control-allow-origin: * Indicates that any source is allowed to Access the foo.com file

Server demo

      
 header("Access-Control-Alllow-Origin:http://foo.example");
 header("Access-Control-Alllow-Origin:*");
? >
Copy the code