How nginx solves cross-domain problems

How to use Nginx to solve front-end cross-domain problems?

Preface

When developing static pages, applications similar to Vue, we often call some interfaces, these interfaces are likely to be cross-domain, and then the browser A cross-origin issue will be reported and no adjustment will be made.

The simplest solution is to set the browser to ignore security issues and set --disable-web-security. However, this method is fine for developing PC pages, but it will not work if it is a mobile page.

Solution

Use Nginx to forward the request. Write cross-domain interfaces as interfaces of the local domain, and then forward these interfaces to the real request address.

Give me an example

For example, we are developing a Vue application.

Original:

The debugging page is: http://192.168.1.100:8080/

The requested interface is: http://ni .hao.sao/api/get/info

Step 1:

The requested interface is: http://192.168.1.100:8080/api/get/ info

PS: This solves the cross-domain problem.

Step 2:

After installing Nginx, go to the /usr/local/etc/nginx/ directory (this is for Mac) and modify the nginx.conf file .

Step 3:

Comment out the default server configuration.

Add below:

   server{
        listen 8888;
        server_name  192.168.1.100;
 
        location /{
            proxy_pass http://192.168.1.100:8080;
        }
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

After saving, start Nginx.

PS: You don’t need to know much about Nginx configuration, it’s very simple.

Step 4:

Visit: http://192.168.1.100:8888/

Done.

PS: Note that the accessed port is ‘8888’. If you have addresses in other domains, just continue to add location.

Error Demonstration

I didn’t quite understand the configuration of Nginx at first, so I thought it could be configured as follows.

    server{
        listen 8080;
        server_name  192.168.1.100;
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

The reason why I write this is that I think it will allow Nginx to help me monitor 8080 requests, and then only forward matching requests. What I didn't realize is that Nginx needs to occupy port 8080 after writing this.

Since the port needs to be occupied, it can no longer be occupied by other processes with the same protocol, which results in the developed page being unable to be enabled with port 8080. After a colleague mentioned it, I remembered this matter, changed my thinking, and came up with the top method.

Summary

In fact, you can do this not only during development and debugging, but also in the production environment. After using Nginx to forward the request, the static page to be deployed does not need to be placed in the same domain as the request interface.

Appendix

If you find a problem with the request and find that it is an error reported by Nginx, you only need to find the error.log of Nginx to know the reason.

The prerequisite is to configure error.log in nginx.conf:

error_log  logs/error.log;

The location of error.log on Mac:

/usr/local/Cellar/nginx/1.15.8/logs/error.log

For more Nginx related knowledge, please visit Nginx usage tutorial column!

The above is the detailed content of How nginx solves cross-domain problems. For more information, please follow other related articles on the PHP Chinese website!