The same-origin policy

So before we talk about cross-domains, let’s talk about a couple of concepts, right

homologous

  1. Use in a web pagewindow.oringin/location.oringinYou can view the current source. Source = protocol + domain name + port number. Homologous means that the three are exactly the same, and can not be called homologous without one.

Browser rules prevent data leakage. If js runs in source A, it can only fetch data from source A, not from source B. Cross-domain is not allowed. 2. For example, if yang.com/index.html references cdn.com/1.js, then 1.js runs in the source yang.com. It has nothing to do with CDn.com, so 1.js can only obtain the data of yang.com, not 1.yang.com or QQ.com. Pages from different sources are not allowed to access each other’s data. 3. Give specific examples

  • Build two directories, qQ-com and Allen-com respectively simulate Qzone and bad websites, there are two server.js
  • Then respectively under the directory, create a public folder, qq inside put the index. The HTML/qq. Js/friends. Json; Public in the Allen directory holds index.html/allen.js.
  • Change the server.js file paths separately to ensure that we can access these file paths normally, remember that the port number Settings are different
  • A small episode, about how to set up the hosts, find notepad with administrator privileges to open, then c/Windows/systerm32 / drivers/etc to check all file types, find hosts, edit the save and exit.
  • With normal Use of AJAX, js running in qq.com: 8888 can use AJAX to request json steps to get results, and can also access /friends.json, but with allen.com: 8889 running js is not accessible.

Cross domain

Because of the same origin policy, what can be done to enable data access between different sources

CORS

With CORS, the browser says that if you want to share data, you need to specify this in advance. The server uses access-Control-allow-oringin in the response header to set the source that can Access the data. You can use Request. headers[‘referer’], a dynamic reference, or see the MDN documentation for details.

JSONP

  1. Using JSONP, mainly due to IE10 prior to the version does not support CORS, but also cross-domain, that IE browsing before how to do, have to think of another way.
  • Although data cannot be accessed across domains, JS can be referenced across domains. So we just need to put the data we need to access across the domain into a JS file callback function as arguments, and then usescriptThe tag refers to the JS file that executes the callback function, which contains the data we need.
  • The name of the callback function is a random number that we pass to the back end as a callback argument, and the back end handles the execution of the function.
  • The advantage of using this approach is that it is compatible with IE and can accomplish cross-domain
  • The disadvantage is that the script tag is used, so you can’t read the exact status code, and you don’t know the specific response body content. Post is not supported, only GET is supported.
  • JSONP has anything to do with JSON, so we can just say that when we first asked for data in JSON file, we had a callback function in JS and we added this JSON file like JSON with padding, so JSOP came in, but now we have a lot of different types of data, So JSONP has nothing to do with JSON.