JSONP cross-domain

Source: Internet
Author: User
Tags script tag

1. Browser-Origin policy

    • The same-origin policy restricts how documents or scripts loaded from the same source interact with resources from another source. This is an important security mechanism for isolating potentially malicious files.

2. A definition of a source
If the two-page protocol, the port and the domain name are the same, then two pages have the same source, which is the same origin.
http://www.example.com/dir/page.htmlThis URL, the protocol is http:// , the domain name is www.example.com , the port is 80 (the default port can be omitted). Its homologous situation is as follows.

    • http://www.example.com/dir2/other.html:Homologous
    • http://example.com/dir/other.html:Different sources (domain names are different)
    • http://v2.www.example.com/dir/other.html:Different sources (domain names are different)
    • http://www.example.com:81/dir/other.html:Different sources (ports are different)

Reference articles

    • Https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
    • Http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

The same-Origin policy stipulates that AJAX requests can only be sent to the same-origin URL, or error.

Jsonp enabling cross-domain access to data

JSONP (JSON with Padding) is a "usage pattern" of JSON
Because of the same-origin policy, the Web page that is generally located server1.example.com cannot communicate with the server1.example.com server that is not, and HTML the <script> element is an exception.

Ajax requests are affected by the same-origin policy, and cross-domain requests are not allowed

The link in the SRC attribute of the script tag can access the cross-domain JS script, using this feature, the server no longer returns JSON-formatted data, but instead returns a section of the JS code called a function, called in SRC, so that the cross-domain is implemented.

Jsonp is a common method for server-to-client cross-origin communication. The biggest feature is simple to use, old browsers all support, server transformation is very small.

The basic idea of JSONP is to dynamically create an <script> element where the script element sends requests that are not ripe for the same origin policy and can only send a GET request. After the server receives the request, it returns the data in a callback function with the specified name.

  <script>//srl server rendered JavaScript button.addeventlistener (' click ', (e) + = {/ /dynamically Create script var script = document.createelement (' script ') let Functionname= ' Blog1 ' +parseint (Math.ran Dom () *100000,10)//callback window[functionname]=function (Result) {if (res ult=== ' success ') {Amount.innertext=amount.innertext-1}else{}}/                        /Send Request SCRIPT.SRC = ' http://feile.com/pay?callback= ' +functionname document.body.appendChild (script)                Script.onload = function (e) {//Debugger E.currenttarget.remove () Delete Window[functionname]} script.onerror = function (e) {alert (' FAI L ') e.currenttarget.remove () Delete Window[functionname]}) </SCRI Pt>  

The above code sends a request to the server by dynamically creating the Add script element, and the query string must have the callback parameter to specify the name of the callback function.


After the server receives the request, it returns the data in the parameter position of the callback function. As soon as the browser defines the corresponding callback function, the function is immediately called.

SOURCE Download Link: Github

JSONP cross-domain

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.