ajax request always unsuccessful? Detailed explanation of browser's same-origin policy and cross-domain issues

摘要： XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xiao

Scenes

The code farmer Xiaoming wants to make a big screen to show the business data to the boss, which includes the data from his own website and the data from the old king next door.
Then the data of your own website provides a data interface such as http://xiaoming.com/whoami.
Next door, Lao Wang provides a data interface such as http://oldwang.com/isdad . It
is no problem to open it alone. But as soon as the ajax request using js is used, the data from oldwang.com cannot be received.
Click on the browser console to see, the red character is marked (Chrome):

XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xiaoming.com/' is therefore not allowed access.

This is the cross-domain problem

Why is there such a problem?

Imagine if Lao Wang next door doesn't know you at all, and his website has various user interfaces, order interfaces, and article interfaces, then anyone can put the data returned by these interfaces directly on their own website, or in real time.

So browsers have developed a same- origin policy , which restricts the access to resources from other origins from scripts in one origin.

<script>
  document.domain = "x.com";
</script>

The most classic, efficient, and browser-compatible solution: JSONP

But there is a fatal disadvantage: very high risk of cross-site scripting attacks, so DataV does not support this method

Seeing the name JSONP, many people think that this is a kind of black technology used for cross-domain closely related to JSON, but in fact, from the perspective of cross-domain, it has nothing to do with JSON. He uses the browser Allows cross-domain loading of resources such as js to obtain data.

Because the browser supports cross-domain loading of js such as <script src="http://aliyun.com/....."></script> , so it is very simple, you can wrap the data into js.

This is the data, which cannot be "executed" when loaded into the data through script, let alone passed to the callback function of ajax:

{
  "data": 123
}

This is a js script, as long as it is callback associated with the callback function of ajax, the data can be passed to the callback function:

callback({
  "data": 123
})

This can see four points:

First, the callback needs to be bound to the ajax callback function; second, it needs the cooperation
of the data server . 3. Only GET requests are supported 4. The data server can insert dangerous scripts at will

If jquery is used on the front end, jquery has completed the encapsulation of the entire value acquisition process. The logic is:
1. Randomly generate a unique callback function name and bind it with the ajax callback function.
1. Put the callback function name into the query string of the URL, such as http://oldwang.com/api?callback= jQuery214015557975923291245_1460532274390
1. Generate a <script> tag and use the above URL as src
1. Wait for the data to load, and pass the data into the ajax callback function

The backend takes php as an example. The logic is to get a parameter from the browser as the callback package data:

<?php
  echo $_GET['callback']."(". $data .")";
?>

CORS (Cross Origin Resource Sharing) compatible with most new browsers

His principle is that the old man next door actively tells the browser "Don't stop Xiaoming, we are relatives..."
So the simplest example is to include in the header information returned by the data server:

Access-Control-Allow-Origin: http://xiaming.com

However, this header information does not support enumeration. If there are too many relatives of Lao Wang next door, this header information can only be dynamically generated through the program. Take PHP as an example:

<?php 
if (is_my_bastard($_SERVER['HTTP_ORIGIN'])) {
 header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
}
?>

If Lao Wang is a good person, he will not refuse. then you can directly use *

Access-Control-Allow-Origin: *

Cookies

CORS does not carry cookie information by default. If you want to bring a cookie, you need to add the withCredentials parameter. Take jquery as an example:

$.ajax({
    url: "http://laowang.com/isdad",
    xhrFields: {
      withCredentials: true
    }
  });

The server also needs to add header information that allows Credentials and does not allow wildcards "*", as shown in the following code

<?php 
if (is_my_bastard($_SERVER['HTTP_ORIGIN'])) {
  header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); // 不允许用 *
  header("Access-Control-Allow-Credentials:true");
}
?>

This is the story of the old king next door

Original link

ajax request always unsuccessful? Detailed explanation of browser's same-origin policy and cross-domain issues

Guess you like