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

This article mainly introduces how to use Nginx to solve front-end cross-domain problems, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Preface

When developing static pages, applications like Vue, we often call some interfaces, which are most likely cross-domain, and then the browser will report that the cross-origin problem is not called.

The easiest solution is to set the browser to ignore security issues and set-- disable-web-security. However, it is OK to develop PC pages in this way, not if it is a mobile page.

Solution.

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

Take a chestnut.

For example, we are developing a Vue application.

Previously:

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

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

Step 1:

The requested API 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 Mac's) and modify the nginx.conf file.

Step 3:

Comment out the default server configuration.

Add the following:

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 the configuration of Nginx. It's very simple.

Step 4:

Visit: http://192.168.1.100:8888/

Got it.

PS: note that the access port is' 8888'. If there are addresses in other domains, just continue to add location.

Error demonstration

At first, I didn't know much about the configuration of Nginx, 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 for writing this is that I think it allows Nginx to monitor 8080 requests for me and then forward only matching requests. What I didn't realize was that after Nginx wrote this, it would take up port 8080.

Since the port needs to be occupied, it can no longer be occupied by other processes of the same protocol, resulting in the development of the page cannot be enabled on port 8080. After being mentioned by my colleagues, I thought of this matter and changed my train of thought, so I had the highest method.

Thank you for reading this article carefully. I hope the article "how to use Nginx to solve the front-end cross-domain problem" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.