What is IndexDB?

IndexedDB is a local database provided by browser, which can be created and operated by web script. IndexedDB allows you to store large amounts of data, provide a lookup interface, and build indexes, Click me to see the details of IndexDB.
IndexedDB does not belong to relational database (SQL query statement is not supported), it is closer to NoSQL (non relational database) database, Click me to see NoSQL details.

What is homology strategy?

The so-called homology means that "protocol + domain name + port" is the same, even if two different domain names point to the same ip address, they are not homologous.

The homology strategy limits the following behaviors:

1. Cookies, LocalStorage, and IndexDB cannot be read
2. DOM and js objects cannot be obtained
3. ajax request cannot be sent

What is cross domain?

In a narrow sense, cross domain does not follow the same origin policy.

How to solve this problem?

jsonp

node backend code

var http = require("http"),
    querystring = require('querystring');
http.createServer(function(request, response) {
	var params = querystring.parse(request.url.split('?')[1]);
	var fn = params.callback;
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(fn + '(' + JSON.stringify(params) + ')');
    response.end();
}).listen(8080);
console.log("Server running at http://localhost:8080/");

Native implementation (add script tag)

var script = document.createElement('script');
script.type = 'text/javascript';

// Pass a callback function name to the back-end for the convenience of executing the callback function defined in the front-end when the back-end returns
script.src = 'http://localhost:8080/?callback=handleCallback';
document.head.appendChild(script);
// Callback execution function
function handleCallback(res) {
	console.log(JSON.stringify(res));//{"callback":"handleCallback"}
}

$.ajax implementation

$.ajax({
    url: 'http://localhost:8080/',
    type: 'get',
	dataType: 'jsonp',  // Request mode is JSON
	jsonpCallback: "handleCallback",    // Custom callback function name
});

// Callback execution function
function handleCallback(res) {
	console.log(JSON.stringify(res));//{"callback":"handleCallback","_":"1579143821071"}
}

vue is implemented by vue jsonp

1. Install Vue jsonp

   yarn add vue-jsonp
   //Or npm install vue-jsonp
   

2. Configure Vue jsonp in main.js

   import VueJsonp from 'vue-jsonp';
   Vue.use(VueJsonp);
   

3. Using Vue jsonp

   this.$jsonp('http://localhost:8080/', {})
   .then(res => {
     console.log(JSON.stringify(res));//{"callback":"jsonp_5b8dc4811d2524"}
   })
   .catch(error => {
     console.log(error);
   })
   

Cross domain resource sharing (CORS)

CORS is a kind of request that allows you to implement cross site requests and prevent malicious js at the same time. It will trigger when you send the following HTTP requests:

• Different domain names
• Different subdomains
• Different ports
• Different agreements
  Common cross domain request: only the server can set access control allow origin, and the front end does not need to be set. To bring cookie request: both the front end and the back end need to be set.

Note: setting XMLHttpRequest with credentials property to true and access control allow origin to * will result in an error.

Error content:

Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:8848' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Screenshot of error content:

The front end and the background synchronize cookie s. The front end needs to set the XMLHttpRequest's withCredentials property to true, and the background needs to set the response header access control allow credentials to true, and the response header access control allow origin cannot be *, and the domain name must be specified.

node backend code

var http = require("http"),
    querystring = require('querystring');
http.createServer(function(request, response) {
	var origin=request.headers.origin;
	console.log(request.headers.Cookie)
	var header={
		'Content-Type': 'application/x-www-form-urlencoded',
		'Access-Control-Allow-Credentials': 'true',     // Back end allows sending cookies
	};
	if(false){//If the front end setting with credentials is false
		header['Access-Control-Allow-Origin']='*';
	}else{
		header['Access-Control-Allow-Origin']=origin;
	}
    response.writeHead(200,header);
    response.write('<p>Hello World</p>');
    response.end();
}).listen(8080);
console.log("Server running at http://localhost:8080/");

Native ajax implementation

var xhr = new XMLHttpRequest(); // IE8/9 needs to be compatible with window.XDomainRequest	
// Whether the front-end settings have cookie s
xhr.withCredentials = true;
xhr.open('post', 'http://localhost:8080/', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);//<p>Hello World</p>
    }
};

$.ajax implementation

$.ajax({
    url: 'http://localhost:8080/',
    type: 'get',
	xhrFields: {
		withCredentials: true    // Whether the front-end settings have cookie s
    },
	crossDomain: true,   // The request header will contain additional information across domains, but will not contain cookie s,
	success(res){
		console.log(res);//<p>Hello World</p>
	}
});