Shulou(Shulou.com)06/01 Report--

This article is about how to use Nginx reverse proxy to solve cross-domain problems. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

problem

In previous articles on cross-domain resource sharing, it was mentioned that when you want to send a Cookie,Access-Control-Allow-Origin, you cannot set it to *. You must specify a clear domain name that is consistent with the requested web page. This is the kind of problem encountered in collaboration with others in the development of this project.

Solution idea

Generally speaking, you can use CORS cross-domain resource sharing with the backend to set Access-Control-Allow-Origin to the accessed domain name, which requires the cooperation of the backend, and some browsers do not support it.

Based on the cooperation with the background of the partner, the nginx directional proxy is used to satisfy the browser's homology strategy to realize cross-domain.

Realization method

Reverse proxy concept

Reverse proxy (Reverse Proxy) means that the proxy server accepts the connection request on the Internet, then forwards the request to the server on the internal network, and returns the result obtained from the server to the client requesting the connection on the Internet. At this time, the proxy server behaves as a server externally. The reverse proxy server is like the original server to the client, and the client does not need to make any special settings. The client sends a normal request to the content in the reverse proxy's namespace (name-space), which then determines where to forward the request (the original server) and returns the obtained content to the client as if it were already its own.

The steps of using nginx reverse proxy to realize Cross-domain

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; # listens on port 8000, which can be changed to another port server_name localhost; # the domain name of the current service location / wili/api/ {proxy_pass http://chick.platform.deva.wili.us/api/; # add proxy configuration proxy_http_version 1.1 with access path recorded as / will/api } location / {proxy_pass http://localhost:8001; proxy_http_version 1.1;} error_page 500502 503 504 / 50x.html; location = / 50x.html {root html;}

Explanation of configuration:

As can be seen from the configuration information, we let nginx listen on port 8000 of localhost, and both website An and website B are accessed through port 8000 of localhost.

We have specially configured a "/ will/api" access so that addresses that start with "will/api" are transferred to "http://chick.platform.deva.wili.us/api/"" for processing.

Access address modification

Now that we have configured nginx, all visits have to go through nginx, not the original address of the site (website A, localhost:8001,B, http://chick.platform.deva.wili.us/api/). So change the request interface in website A to http://localhost:8000/wili/api/. Next, start nginx and access 8000 of the configuration.

It is important to note that nginx startup may conflict with the port and cause the startup to be unsuccessful. Check the Task Manager to see if the startup is successful.

Summary

There are many ways for browsers to cross-domain:

Jsonp requires the target server to cooperate with a callback function

CORS requires server to set header:Access-Control-Allow-Origin

The method of nginx reverse proxy is rarely mentioned, but it does not need the cooperation of the target server, but you need to build a transit nginx server to forward requests. (using a reverse proxy may be slower to access a web page than before.)

Thank you for reading! This is the end of this article on "how to use Nginx reverse proxy to solve cross-domain problems". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.