Simple introduction to json cross-origin and simple json cross-Origin

Simple introduction to json cross-origin and simple json cross-Origin

In this article, I have been listening to other people talking about json cross-origin, but I am confused. I only know one of them. So I am angry and read various materials. If there is any incorrect information, please correct ^_^

First, we should first understand that the browser has a very important security restriction, that is, the same-origin policy: client scripts in different domains cannot read other resources without explicit authorization. Cross-Origin ~

Simply put, the Protocol, port, and domain name are different, that is, cross-domain!

However, when some in-depth front-end programming is required, cross-origin operations are inevitable. At this time, the "same-origin policy" is too harsh.

Solution:

1. Use jsonp for cross-origin resolution: (only applicable to GET requests)

Implementation principle: <script> A tag is not restricted by the same-source policy. It can load JavaScript files anywhere, rather than the same-source.
Therefore, the idea of JSONP is that I have a function name with the server. When I request a file, the server returns a JavaScript code. This section of JavaScript calls the agreed function and passes data as a parameter. Coincidentally (not actually), The JSON data format is exactly the same as the object format in JavaScript. So we can use this object directly in the agreed function.

Use JavaScript code

  var eleScript = document.createElement("script");   eleScript.type = "text/javascript";   eleScript.src = "http://example2.com/getinfo.php";   document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

Solve with jquery

$. Ajax ({url: http: // cross-domain dns/document! SearchJSONResult. action, type: "GET", dataType: 'jsonp', // It is changed here with the original json! Jsonp: 'jsoncallback ',})

2. Use the HTML5 window. postMessage method to transmit data across domains (only compatible with IE8 +, FireFox, Chrome, Opera, and other browsers)

The window. postMessage (message, targetOrigin) method is a new feature introduced by html5. it can be used to send messages to other window objects, whether the window object is of the same or different origins.

------------ Here are two solutions ...... In fact, there are many others, and then I will add them one by one -----------------

Articles you may be interested in:

• Use of ajax jsonp for cross-origin requests
• Jquery $. getJSON () Cross-origin request
• Implementation of jquery's ajax and getJson cross-origin acquisition of json data
• Use jQuery and JSONP to easily solve cross-origin access problems
• Use jsonp to perfectly solve cross-origin problems
• Summary of several methods for implementing cross-origin in js (image ping, JSONP, and CORS)
• Summary of cross-origin access between AJax and Jsonp