Home > Web Front-end > JS Tutorial > What is the reason for cross-domain JavaScript?

What is the reason for cross-domain JavaScript?

WBOY
Release: 2022-03-24 17:10:11
Original
2509 people have browsed it

The reason why JavaScript cross-domain is: the browser’s same-origin policy restriction means that the js of the current domain name can only read the 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.

What is the reason for cross-domain JavaScript?

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is the reason for cross-domain JavaScript?

The cross-domain problem is restricted by the browser's same-origin policy. The js of the current domain name can only read the window attributes in the same domain.

Due to 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 speaking, 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 strict 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" to the request method, //The data format is set to jsonp, jsonp: "callback" , //The name of the verification parameter generated by Jquery

1, dataType, this parameter must be set to jsonp

2, jsonp, the value of this parameter needs to be agreed with the server

nginx reverse proxy

webpack Configure reverse proxy: directly use the scaffolding devServer to configure the reverse proxy to solve cross-domain problems during the development process

Cross-domain resource sharing (CORS)

Nodejs cross-domain: Use nodejs to set up a server locally. Use that server to call the background server to return data and then return it to the front-end. There is no cross-domain between servers.

WebSocket protocol cross-domain

Through JSONP

Understand for yourself: JSONP uses the src attribute of the script tag to achieve cross-domain. You can only use get requests, and the background will return a method to you. You pass This method gets the data you want

jsonp principle The front-end defines the method and passes it to the back-end through the src attribute. After the back-end gets the method, it passes in the data splicing method and then passes it to the front-end. The front-end calls it as a method

JSONP 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 detailed content of What is the reason for cross-domain JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template