The reason for cross-domain JavaScript is that due to browser homology policy restrictions, js in the current domain name can only read window attributes in the same domain, so cross-domain occurs. The same-origin policy means that in order to ensure the security of user information and prevent malicious websites from stealing data, browsers prohibit JS interactions between different domains.
How to quickly get started with VUE3.0: Enter
the operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.
The cross-domain problem is restricted by the same-origin policy of the browser. The js of the current domain name can only read the window attributes in the same domain.
Due to the browser's same-origin policy restrictions. The same-origin policy is a convention. It is the core and most basic security function of the browser. If the same-origin policy is missing, the normal functions of the browser may be affected. It can be said that the Web is built on the basis of the same-origin policy. The browser is just an implementation of the same-origin policy. The same-origin policy prevents JavaScript scripts from one domain from interacting with content from another domain. The so-called same origin (that is, in the same domain) means that the two pages have the same protocol, host and port number.
Simply put, the same-origin policy means that in order to ensure the security of user information and prevent malicious websites from stealing data, the browser prohibits JS interactions between different domains. For browsers, as long as one of the domain names, protocols, and ports is different, the same-origin policy will be triggered, thereby restricting the following interactions between them:
1. Cookies, LocalStorage, and IndexDB cannot be read;
2. DOM cannot be obtained;
3. AJAX request cannot be sent.
The stricter definition of cross-domain is: as long as the protocol, domain name, and port are different, it is regarded as cross-domain.
Cross-domain solution
JSONP: You need to add dataType: "jsonp" in the request method, //The data format is set to jsonp, jsonp: "callback", //Jquery generates the name of the verification parameter
1, dataType, this parameter must be set Into jsonp
2. jsonp, the value of this parameter needs to be agreed with the server side
nginx reverse proxy
webpack Configure reverse proxy: directly use the scaffolding devServer to configure the reverse proxy to solve cross-domain problems in the development process
Cross-domain resource sharing (CORS )
Nodejs cross-domain: Use nodejs locally to set up a server, call the backend server through that server, return data, and then return it to the front-end server. There is no cross-domain
WebSocket protocol. Cross-domain
through JSONP.
Understand by yourself: JSONP is src using the script tag. To achieve cross-domain attributes, you can only use get requests. The background will return you a method. You can use this method to get the data you want.
JSONP principle: The front-end defines a good method and passes it to the back-end through the src attribute. The back-end gets the method and then passes it. After entering the data splicing method, it is passed to the front end. The front end uses it as a method to call
JSONP. It mainly adds a callback in the encapsulated request method. This callback is agreed upon by the front and back ends
. Related recommendations: JavaScript learning tutorial.
The above is the details of the reasons for cross-domain JavaScript. Content, please pay attention to other related articles on the php Chinese website for more information!
