Advanced JavaScript for web front-end – several common cross-domain solutions for front-end development

This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

Thoroughly master the “same origin/cross-domain” solution in front and back end communication

• What is homologous and what is cross-domain

Same-origin means that the front-end page uses the same protocol, domain name, and port number to communicate with the back-end API interface. Same-origin cross-domain means that the front-end page uses the same protocol, domain name, and port number to communicate with the back-end API interface. Cross-domain request is generated whenever the protocol, domain name, and port number are different

• Cross-domain causes are generated

• Servers deployed separately
• Local development: Local development calls the interface on the test server
• Use third-party interface apis

• Several common solutions across domains

• JSONP
  • Principle: Using script tags do not exist domain restrictions to achieve cross-domain requests.
  • When requesting a cross-domain API, the address of the interface needs to be assigned to the SRC attribute of the script tag
  • A function is also passed to the background in the form of a question mark
  • The passed function must be a global function
  • When the server receives the request, it prepares the data and returns it to the foreground as a string of arguments to the passed function
  • A string is returned to the foreground, and the browser automatically recognizes the JS code in the string and executes it
  • Disadvantages: Only GET requests are supported and it is not secure

// JSONp foreground wrapper
// Callback must be a global function
function jsonp(url, callback){
	let script;
	// In case the callback is not a global function, the passed callback function is mounted globally
	let name = `jsonpThe ${new Date().getTime()}`;
	window[name] = function(data){
		// After the data request comes back, we need to manually remove the script tag we added earlier
		document.body.removeChild(script);
		// Delete the global function
		delete window[name];
		callback && callback(data);
	}
	// Handle the URL, concatenating the callback parameter
	url += `${url.includes('? ')?'&':'? '}callback=${name}`
	// Create a script tag to send the request dynamically
	script = document.createElement("script");
	script.src = url;
	document.body.appendChild(script);
}

jsonp('http://127.0.0.1/list'.result= >{
	console.log(result);
});
Copy the code

• CORS cross-domain solution
  • How it works: Bypass browser security policies
  • The server side sets the allowed source
  • Access-control-allow-origin: * indicates that all sources are allowed (other specific sources can be set, such as http://192.168.1.123).
  • Access-control-allow-credentials: true/false Specifies whether to run the cookies. If the above attribute is set to *, the cookies are not allowed and cannot be set to true
  • Access – Control – Allow – Headers: the content-type:… The request header to run
  • Access – Control – Allow – the Methods: the GET and POST… The way the request is run
  • Disadvantages: you can either set all or a single source, not multiple sources at the same time.
    • To Allow multiple sources to be set at the same time, set the allowed source dynamically (set a whitelist, and dynamically assign the source to access-control-allow-origin if the source of the current request is in the whitelist).

• Proxy implements cross-domain requests using proxies
  • Server deployment: Nginx reverse proxy
  • Local development: webpack-dev-server