What is cross-domain

  • The domain policy of the browser requires the same protocol, domain name, and port. If any of the requirements is not met, the policy is cross-domain.

What are the problems across domains

1, unable to get cookies, non homologous localStorge, sensionStorge, with indexedDB,

2. The IFrame page cannot be obtained

3. Unable to send AJAX or FETCH request and rejected by the browser, the server is required to support cross-domain CORS setting:

  • The server is allowed to set the response header
"Access-Control-Allow-Origin", "*"
Copy the code
  • The server sets the response header to Allow cookies: The server sets access-Control-allow-credentials to true and the withCredentials of XMLHttpRequest to true, allowing cookies to be sent across domains
response.setHeader("Access-Control-Allow-Origin", "*");
Copy the code
  • Server set response header allowed methods
 response.setHeader("Access-Control-Allow-Methods", "*");
Copy the code
  • Server Settings allow response headers to be exposed:
 response.setHeader("Access-Control-Expose-Headers", "*");
Copy the code
  • The server sets the storage time for the request
response.setHeader("Access-Control-Max-Age", "3600");
Copy the code

Js common cross-domain mode :(unfinished)

1. Cross domains through JSONP

  • JSONP (JSON with Padding) is a “usage mode” of JSON that allows web pages to request data from other domains.
  • According to the XmlHttpRequest object, which is subject to the same origin policy, web pages can get JSON data dynamically generated from other sources using the open policy of
  • The data captured with JSONP is not JSON, but rather arbitrary JavaScript that is run with a JavaScript interpreter rather than parsed with a JSON parser.
  • All of the Get requests sent by JSONP are viewed through ChromeJs typeRather than XHR

disadvantages

  • Only Get requests can be used
  • Unable to register event listeners such as SUCCESS and error, it is not easy to determine whether a JSONP request failed
  • JSONP is executed from code loaded in other domains and is vulnerable to XSS cross-site request forgery.

Steps:

  • 1. Convert the incoming data into a URL string
  • 2. Handle callbacks in urls
  • 3. Create a script tag and insert it into the page
  • 4. Mount the callback function

Jsonp code implementation

function encodeParam(url, obj) { // 1. // {id:1,name:'jack'} => id=1&name= Jack const dataString = url.indexof('? ')? '? ':' & '; for(let key in data) { dataString += `${key}=${(data[key] ! == undefinded ? data[key] : '' }` } return dataString; } const jsonp = function (url, data, callback) {//promise returns new promise ((resolve, reject)=>{... callback(data)-->resolve(data)... }) let dataString = encodeParam(url, data); // Handle url callback const cbfnName = 'my_json_cb_${math.ramdom ().toString().repalce('.', '')}'; dataString += `callback=${cbfnName}`; Const scriptEle = document.createElement('script'); // create a script tag and insert it into the page const scriptEle = document.createElement('script'); Scriptele. SRC = '${url}${dataString}' // 4, callback = function(data) {callback(data); / / after processing the callback function data, delete the json script standard document. Body. RemoveChild (scriptEle); } document.body.appendChild(scriptEle); }Copy the code

Server code

let express = require('express'); let app = express(); app.get('/student', function(req, res) { let {... callback... } = res.query; res.end(`${callback}(data)`) })Copy the code