Home > Developer > Web Develop
First: What is cross-domain?
Cross Domain Request: Requests another resource from one resource, where the request address is different, the domain name is different, the port number is different, and the request protocol is different.
It is caused by the browser's homologous policy, which is the security restrictions that the browser imposes on JavaScript.
About the same-origin strategy recommended here to go to Ruan Big blog View Nanyi's personal blog
How do I differentiate between current requests and cross-domain requests?
When the front-end uses the XHR object to initiate a request, the browser makes a string match between the requested send address and the protocol domain name of the requesting address
Tip: localhost and 127.0.0.1 also count across domains!
scenarios in which the browser allows cross-domain requests :
IMG, LINK, SCRIPT, IFRAME ...
scenarios in which browsers prohibit cross-domain requests :
XHR ---the browser is in security, disabling XHR cross-domain requests (in fact the server gives the response message, but the browser does not allow the use)
How do I resolve a browser's XHR cross-domain request limit?
There are a variety of ways to resolve cross-domain requests on the Web, just a list of two common
1), Modify the response message header, add Access-control-allow-origin header server Side Add response header
2), using Jsonp
JSONP: JSON with Padding, filled json, is completely different from JSON, and is a way to use JSON data. This means adding a function name around the JSON string: Doresponse ( {"ename": "Tom", "Age":);
Jsonp is a means of addressing xhr cross-domain limitations. Rationale: Use a dynamically created script tag instead of XHR to initiate an asynchronous request, requiring the server to return Application/javascript, immediately executing on the client-the function body to execute is declared in the client browser.
<script src= "x.php" async></script>
Usually we use the script tag to get and execute a section of JS code and the scrip tag is the same as the element that owns the SRC attribute, which is not affected by the browser homologous policy;
If we requested Doresponse ( data ) to create a doresponse function locally
The result is a direct call to the Doresponse function and the data that we need in its parameter group
<!doctype html> $ ( "#btn"). Click (function () {var Scri = docuemnt.createelement ("script" = "http://localhost/AJAX/JSONP/1_jsonp.php" ; S.async =true ; }); </script> </body>How to use JSONP to initiate an asynchronous request in jquery:
(1) $.getjson ()
Purpose 1: Initiate an asynchronous request with XHR (cannot cross-domain)
$.getjson (' x.php ', doresponse)
Purpose 2: Initiate cross-domain asynchronous requests using JSONP
$.getjson ('/HTTP//cross-domain address/x.php? callback=?', Doresponse)
(2) $.ajax () recommended
Purpose 1: Initiate an asynchronous request with XHR (cannot cross-domain)
$.ajax ({})
Purpose 2: Initiate cross-domain asynchronous requests using JSONP
$.ajax ({ dataType: ' Jsonp ' })
jquery simplifies the process of getting back-end response data in a script, but the principle is the same;
XHR cross-domain requests and JSONP
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
