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

Preface

When developing static pages, such as Vue applications, we often call some interfaces, which are likely to be cross-domain, and then the browser will report a cross-origin problem and refuse to call.

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 for mobile pages.

Solution

Use Nginx to forward requests. Write the cross-domain interface to call the local domain interface, and then forward these interfaces to the actual request address.

For example

For example, we are developing a Vue application.

original:

The debug 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 /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 too much about Nginx configuration, it’s very simple.

Step 4:

Visit: http://192.168.1.100:8888/

Done.

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

Error demonstration

I didn’t quite understand Nginx configuration at first, and thought I could configure it as follows.

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

The reason I wrote this is that I thought this would allow Nginx to help me listen to requests on 8080 and then only forward matching requests. What I didn't realize is that after Nginx was written like this, it would need to occupy port 8080.

Since the port needs to be occupied, it cannot be occupied by other processes of the same protocol, which results in the inability to enable the developed page with port 8080. It was only after a colleague pointed it out to me that I remembered this matter. I changed my thinking and came up with the above method.

Summarize

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

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.