How JavaScript solves cross-domain issues

This article is mainly to share JavaScript methods to solve cross-domain problems. The text also introduces the cross-domain concept and the interview example of the cross-domain. I hope that everyone can gain something through this article.

1. What is a cross-domain?

Cross-domain: Refers to the script that the browser cannot perform other websites. It is caused by the homologous strategy of the browser, which is the security limit applied to JavaScript.

For example: A page wants to get B page resources, if the protocol, domain name, port, and subdomains of the A, B page are different, and the access action performed is cross-domain, and the browser is generally All cross-domain access is limited, that is, cross-domain request resources are not allowed. Note: Cross-domain restrictions are actually a browser restriction. It is important to understand this! ! !

Homogenous Policy: means the agreement, domain name, and ports are the same, with one of which will generate cross-domains;

2. Cross-domain access Example

javascript如何解决跨域问题 Suppose there are two websites, the A website is deployed in: http: // localhost: 81 on the local IP port 81;

b Deployment in: http: // localhost: 82 That is, the local IP port 82. Now the page of the A website wants to access the information of the B website, the code of the A Site page is as follows (here JQuery asynchronous request)

$ (function () {

. GET (“http: // localhost: 82 / api / value”, {}, function (result) {

$ (“# show”). html (result);

} )});

From the error message, it can be seen that the cross-domain problem has occurred!

3. How to solve cross-domain problems?

From the previous introduction, we already know the cause of the wrong, since the cross-domain will generate a problem, then we will not be cross-domain.! ! !


First we use Nginx as a proxy server and user interaction so that users only need to interact on the 80 port. This avoids cross-domain problems because we are all interacting on the 80-port;

Let’s take a look at the specific configuration of using nginx as a reverse agent:

Server {listen 80; # listening to the 80 port, can be changed to other port server_name localhost; # Current service domain name #Charset Koi8-r; #access_log logs / host.access.log main; location / {proxy_pass http: / / localhost: 81; proxy_redirect default;} location / apis {# Add access directory to / apis agent REWRITE ^ / Apis /((.*) $ 1 Break; proxy_pass http: // localhost: 82;} # below javascript如何解决跨域问题

1. When the user sends localhost: 80 / time being forwarded by Nginx to http: // localhost: 81 service;

2. When the interface request interface data As long as the / apis starts, it will be forwarded to the rear interface server by Nginx;
 summary: Nginx implements the principle of cross-domain, actually putting the web project and backend interface items in one domain In this way, there is no cross-domain problem, then request the address to request different servers (the truly managed server);   After reading this article, youCan I independently solve the JavaScript to solve cross-domain problems? If you want to learn more skills or want to know more about the content, please pay attention to the Tumi Yun Industry Information Channel, thank you for reading. 

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment