Cross-domain requests in JS

Tag: SSD Color Alert Div cannot respond to not address cal

A cross-domain request is not just a cross-domain request for Ajax, but rather a cross-domain request for a page as long as it requests resources for another domain name.

For example, a SRC tag with other domain names, and other third-party CSS styles introduced in the page.

For IMG and CSS, cross-domain requests themselves have no more security issues because they are read-only and do not cause side effects on source resources.

If cross-domain requests are sent from within the script, because the script is highly flexible, the browser, for security reasons, restricts its functionality according to the same- origin policy , so that the script can only request resources of the same origin under normal circumstances.

If the page does require a script to request resources from other sites, it should work under a mechanism for cross-domain resource sharing.

Homologous policy

For two pages (resources), they are said to conform to the same origin policy as long as they meet the following three conditions:

1. Same protocol

2. Same port

3. Same domain name

The document.domain can be set through JS to pass the same Origin policy . Such as:

In the Subdomain http://a.example.com/test.html page, the document.domain= ' example.com ' is set by JS, then the current page and http://example.com/page.html Conform to the same Origin policy.

Simply put, for page http://www.example.com/page1.html, the following pages and it do not conform to the same origin policy, the script cannot directly request these resources:

• Https://www.example.com/page1.html: Protocol Different

• Http://www.example.com:81/page1.html: Ports are different

• Http://another.example.com/page1.html: Different domain names

If you're using jquery, you can use JSONP to solve cross-domain

  $.ajax ({URL:  "http://crossdomain.com/services.php"  ' jsonp '  '  f Unction   (Result) { for  (var  i in   result) { Alert (i  + ":" +result[i]); //  loop output   }}}); 

$.get (' http://crossdomain.com/services.php?callback=? ') {name:encodeuricomponent (' tester 'function  (JSON) {     for (var   in JSON) {        alert (i+ ":" +json[i]);    

JSONP principle

The principle is to create a <script> element, the address to the third-party API URL, such as:
<script src= "http://www.example.net/api?param1=1&param2=2" ></script>
A callback function is provided to receive the data (the function name can be contracted or passed through the address parameter).
The response generated by the third party is a wrapper for the JSON data (so called JSONP, json padding), as in the form: callback ({"Name": "Hax", "Gender": "Male"})
This allows the browser to invoke the callback function and pass the parsed JSON object as a parameter. This site script can process the incoming data in the callback function.

Cross-domain requests in JS