Ajax Cross-domain request

Before you know the cross-domain, make a simple understanding of the domain name and protocol name, such as the following URL

Http://mail.163.com/index.html

HTTP//protocol name, which is the HTTPS Hypertext Transfer Protocol

Mail server name

163.com Domain Name

Mail.163.com website Name

/root directory

index.html the default Web page under the root directory

1. What is a cross-domain request?

The protocol , domain name , and port number of the next resource requested is inconsistent with the current resource, which is called cross-domain request

Simple to understand, is $.get (URL, [data], [callback], [type]) inside the URL of the protocol name, domain name or port number is not the same as the current domain name

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/8A/B7/wKioL1g5N-zTVqHEAAEcMLjJtAQ988.png "title=" Qq20161126152045.png "alt=" Wkiol1g5n-ztvqheaaecmljjtaq988.png "/>

In order to avoid the obscure text, we directly a small demo:

<! Doctype html>

In the browser address bar, enter "http://localhost:8081/Ajax/cross.html" to open the page, click on the "Non-cross-domain button" To view the console
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/8A/B7/wKioL1g5ONjhojfSAABrX20sP0s236.png "title=" Qq20161126152346.png "alt=" Wkiol1g5onjhojfsaabrx20sp0s236.png "/>
Open "Network"
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/8A/B7/wKioL1g5OUjx4MpyAACnvZ9R5Ks266.png "title=" Qq20161126152629.png "alt=" Wkiol1g5oujx4mpyaacnvz9r5ks266.png "/>-------------------------------------------- -------------------------------------------------------------
Click on the "Cross-domain button" To view the console and find that the XHR request failed, obviously, the requested domain name is different, this is the typical cross-domain
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/8A/BB/wKiom1g5OaqQdgXYAABl8WynHKU160.png "title=" Qq20161126152826.png "alt=" Wkiom1g5oaqqdgxyaabl8wynhku160.png "/>


2. Does the browser allow cross-domain requests?

Allow : 
Allow : <link rel= "stylesheet" href= "cross-domain CSS" >
Allow : <a src= "cross-domain Links" >
Allow : <script src= "cross-domain JS" >
prohibited :Ajax requests are not allowed across domains! 

Description: For security reasons, all browsers prohibit the use of XHR asynchronous cross-domain requests by default.

For example, the above mentioned IMG allows cross-domain

<! DOCTYPE html>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/8A/B7/wKioL1g5PJuTQJtAAADSp6mQS7I031.png "title=" Qq20161126153942.png "alt=" Wkiol1g5pjutqjtaaadsp6mqs7i031.png "/>

Different protocol name, different domain name, the page normal display picture, description allows cross-domain. But in the beginning of the demo, using Ajax to initiate asynchronous requests is not allowed. What should we do then?

3. Cross-Domain Solution

3-1. Set "Access-control-allow-origin" head

Do you remember? Domain name and domain name corresponding to the IP is also not allowed cross-domain, on this basis, we put the above example slightly modified:
(Although the same 2.php page, but one is the domain name, one is the IP address of the domain name)

HTML code:
<! Doctype html>

PHP Code:
<?phpheader (' Content-type:application/json; Charset=utf8 '); $data = [' uname ' = ' Tom ', ' age ' =>20];echo json_ Encode ($data);

Click the "Non-cross-domain button" to initiate an AJAX request normally
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/8A/BC/wKiom1g5RI6Bg1jdAABrX20sP0s426.png "title=" Qq20161126152346.png "alt=" Wkiom1g5ri6bg1jdaabrx20sp0s426.png "/>
Click on the "Cross-domain button", error, indicating that this is a cross-domain
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/8A/B7/wKioL1g5RRyBQ_HWAAChFAkCKSg589.png "title=" Qq20161126161712.png "alt=" Wkiol1g5rrybq_hwaachfakcksg589.png "/>
Following the instructions given by the console, we set the Access-control-allow-origin header in the PHP page

PHP Code:
<?phpheader (' Content-type:application/json; Charset=utf8 ');//Specifies that other domain names are allowed to access the header (' access-control-allow-origin:*  ‘); $data = [' uname ' = ' Tom ', ' Age ' =>20];echo json_encode ($data);

See BTN2, it is very rare, this also shows that the set  access-control-allow-origin Head is able to solve the cross-domain
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/8A/BC/wKiom1g5RfjgHoixAACdP89SQC4466.png "title=" Qq20161126162002.png "alt=" Wkiom1g5rfjghoixaacdp89sqc4466.png "/>

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1876874
Ajax Cross-domain request