Detailed explanation of using Nginx reverse proxy to solve cross-domain problems

question

In the previous article about cross-domain resource sharing, it was mentioned that when sending cookies across domains, Access-Control-Allow-Origin cannot be set to *, and a clear domain name that is consistent with the requested web page must be specified. This kind of problem was encountered when collaborating with others during the development of this project.

Solution

1. Generally speaking, you can use CORS cross-domain resource sharing with the backend to set Access-Control-Allow-Origin to the domain name to be accessed. This requires the cooperation of the backend, and some browsers do not support it.
2. Based on the cooperation with the backend of the partner, the nginx proxy is used to meet the browser's homology policy to achieve cross-domain

Implementation

Reverse proxy concept

The reverse proxy method refers to using a proxy server to accept connection requests on the Internet, and then forwarding the requests to the server on the internal network; and returning the results obtained from the server to the client requesting the connection on the Internet. At this time, the proxy server appears to the outside world as a server. The reverse proxy server appears to the client like the original server, and the client does not need to perform any special configuration. The client sends a normal request to the content in the reverse proxy's namespace, and the reverse proxy then determines where to forward the request (the original server) and returns the obtained content to the client, just as if the content originally belonged to it.

Steps to implement cross-domain using nginx reverse proxy

Go to the nginx official website to download the package and build the nginx environment

Modify the nginx configuration file, find the ngixn.conf file, and modify the relevant configuration

http {
 include mime.types;
 default_type application/octet-stream;

 sendfile on;

 server {
  listen 8000; #Listen to port 8000, you can change it to other ports server_name localhost; #Domain name of the current service location /wili/api/ {
    proxy_pass http://chick.platform.deva.wili.us/api/; #Add proxy configuration with access path recorded as /will/api proxy_http_version 1.1;
  }
  
  location / {
    proxy_pass http://localhost:8001;
    proxy_http_version 1.1;
  }
  
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
   root html;
  }

 }

}

Configuration explanation:

• From the configuration information, we can see that we let nginx listen to port 8000 of localhost, and the access to website A and website B is accessed through port 8000 of localhost.
• We specially configured an access of "/will/api" so that all addresses starting with "will/api" are forwarded to "http://chick.platform.deva.wili.us/api/" for processing.
• Access address modification

Now that we have configured nginx, all accesses must go through nginx instead of the original website address (Website A localhost:8001, Website B http://chick.platform.deva.wili.us/api/). Therefore, we need to modify the request interface in website A to http://localhost:8000/wili/api/. Next, start nginx and access the configured 8000

One thing to note is that starting nginx may cause port conflicts and cause startup failure. You can check whether the startup is successful in the task manager.

Summarize

There are many ways to solve cross-domain browser problems:

1. jsonp requires the target server to cooperate with a callback function
2. CORS requires the server to set the header: Access-Control-Allow-Origin
3. The nginx reverse proxy method is rarely mentioned, but it does not require the cooperation of the target server. However, you need to build a transit nginx server to forward requests. (Using a reverse proxy may make accessing web pages slower than before)

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.