CORS Ajax cross-domain request PHP simple complete case A

First, Cors:cross-origin Resource sharing

Cors is the abbreviation of Cross-origin Resource sharing, which means that cross-domain resource sharing can be obtained not only across subdomains, but even if the domain name is completely different.

One of the more common applications is Ajax cross-domain request data.

This feature IE11 start to support:

Like the stock market, great rivers is green, the green grassland is boundless.

Second, Ajax cross-domain request header settings and cases

Compared to traditional AJAX requests, the occasional workload of Ajax cross-domain requests is primarily at the end of the data receiver, which is set on the server side.

For example, assuming that our server uses the best language PHP in the world, and the name of the AJAX request page is cors-ajax.php, we can make the following settings on this PHP page header :

Set allow other domain names to access the header (' access-control-allow-origin:* ');  Set the allowable response type header (' Access-control-allow-methods:post, GET ');  

Access-Control-Allow-Origin:*Indicates that any domain name request me, I will not deny others thousands of miles away. Usually when actually developing, we will set up the trusted domain name here, for example:

Header (' access-control-allow-origin:http://www.iknowu.com ');

If you have multiple domain names, you can use commas to separate them and Access-Control-Allow-Methods write them in the same format as above.

As long as the above settings are in the PHP page, the rest of the work is basically no different from the traditional AJAX requests.

For example, if you don't do anything, you can randomly return a picture of a little girl. Address:

<?php//just appeared in the header ... echo ' http://image.zhangxinxu.com/image/study/s/s128/mm '. Rand (1,20). JPG ';?>

At this point we casually build an HTML page, write down this minimalist XMLHttpRequest request JS code:

var xhr = new XMLHttpRequest (); Xhr.open (' Post ', ' http://www.zhangxinxu.com/study/201802/cros-ajax.php '); xhr.onload = function () {    console.log (xhr.responsetext);}; Xhr.send (NULL);

We can request a random return image address to the cors-ajax.php.

Seeing is believing, you can click here: CORS Ajax cross-domain request test demo/

As you can see, our Demo test page address is: Http://zxx.xiliz.com/cors-ajax

That is, the domain name is zxx.xiliz.com, and the requested PHP page domain name is www.zhangxinxu.com, a typical cross-domain request scenario, below to see what happens:

Click on the Demo page button and then when when:

The random image address was successfully requested and rendered on the page.

Reproduced in: by Zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7374

CORS Ajax cross-domain request PHP simple complete case A