Directory:

  • One: Why do cross-domain problems exist?
  • Two: what are the common cross-domain problems
  • Three: What are the common cross-domain solutions?

One: Why do cross-domain problems exist?

In a word: we all know the “browser same origin policy” caused by preventing access to cross-domain resources, obviously, this is more secure, otherwise, we can access taobao’s interface, alipay’s interface, that is not messy.

Two: What are the common cross-domain problems?

  1. Cookie, localstory indexdb cannot cross domain sharing
  2. Dom cannot be accessed and manipulated across domains (this is common when iframes are nested with different domain names)
  3. Ajax cannot make cross-domain requests

Three: What are the common cross-domain solutions?

First of all, to clarify the concept, different cross-domain problems require different solutions, not just jSONP, CORS, etc. These are also solutions to ajax requests cross-domain problems. What about other cross-domain problems?

  • 1: Cookie, localStory, indexDB cross-domain sharing problem
  • 1: cookie: If the first-level domain names are the same and the second-level domain names are different, document. Domain can be used to control. That is, as long as the document.domain under two secondary domain names are consistent, then cookie sharing can be done
  • Iframe problem: for example, in the URL1 page to embed URL2 page, this time, we usually use iframe to nest URL2 page, then, if the parent-child transmission how to transfer data? 1: window.name. 2: url #hash value 3: window.postmessage (html5 new method) 3: window.postmessage (HTML5 new method) Please refer to the documentation for details
  • 2: Cross-domain problems with Ajax requests
  1. Jsonp (dynamically generates javascript tags, passes in callback, and the back end returns an executable piece of code via arguments)
  2. WebSocket (protocol itself does not have cross-domain issues)
  3. Cors (Backend setup headers)
  4. Setting up the proxy (commonly used nginx)

Four: actual code solution cases

Case 1: the json

Create the script tag dynamically and execute the code window.xxx = introduced by SRCfunction (value) {
    console.log(value)
}
var script = document.createElement('script')
script.src = 'http://x.stuq.com:7001/json?callback=xxx'Document. The body. The appendChild (script) back-end return at this time is usually the following format: a function call expression / * * / typeof = = = XXX'function' && xxx({msg: "hello world"});
Copy the code

2: window. Name. Window. PostMessage, hash case

Take iframe as an example: Var iframe = document.createElement(var iframe = document.createElement('iframe')
iframe.src = 'localhost:9000/public/hash.html'Document. The body. The appendChild (iframe) / / method one: in child iframe will be passed on to the parameters of the parent page Settingshash, dynamically listening in the parent pagehashIframe: var data ='Data to be transmitted'; parent.location.href = `http://localhost:8000#msg=data`Parent page: window.onhashchange =function() {console.log(location.hash) // parsehashAnd then get data}hash, set the window in a child frame. The name, then the parent components used in the iframe. ContentWindow. The name for the value of the corresponding child iframe: var data ='Data to be transmitted'; window.name = data; The parent page: the iframe. ContentWindow. The name can obtain child iframe window. The value of the name. Method 3: Same thinghashThe postMessage event is triggered in the child iframe, and the parameter is passed in. The messasge event is listened in the parent page, and the corresponding value of the child IFrame: var data ='Data to be transmitted';
parent.postMessage(data, The '*'Parent page: window.adDeventListener ('message'.function(e) {
  console.log(JSON.parse(e.data))
}, false);

Copy the code

3: cors case

Set the request header access-Control-allow-Origin: * in the backend codeCopy the code

Reference Documents:

  • www.ruanyifeng.com/blog/2016/0…
  • Developer.mozilla.org/zh-CN/docs/…
  • www.cnblogs.com/roam/p/7520…