[nodejs study notes] Reverse proxy with Nginx locally: solving cross-domain problems

written in front

These are the notes I made when I was learning Nodejs——
Question: The front-end and back-end projects are started locally at the same time. When the front-end page requests the back-end interface, it crosses domains. How to solve it? (This article only records method one).

Method 1: Nginx reverse proxy

Method 2: CORS

Introduction to Nginx

• A high performance web server.
• Generally used as reverse proxy, static service, load balancing.

reverse proxy, forward proxy

• Reverse proxy: The client cannot be controlled, and it is a black box for the client.
• Forward proxy: The client can control, for example, install a proxy tool on its own computer to access the company intranet.

Nginx reverse proxy process

1. When the client initiates a request to Nginx, Nginx will analyze whether the request address needs to be forwarded;
2. If necessary, it is forwarded to the corresponding address through proxy_pass.
3. Return the result of the request to the client.

download nginx

1. windows: download address
2. mac: brew install nginx(Of course, the premise of doing this is that Homebrew has been downloaded and installed)

Supplement: How to install Homebrew on Mac

Nginx commands (Mac)

nginx -t // 测试配置文件格式是否正确
nginx // 启动
nginx -s reload // 重启
nginx -s stop // 停止

Perform reverse proxy (taking Mac as an example)

step1：

• Open the terminal and enter nginx -t. You can see the Nginx configuration file address:/usr/local/etc/nginx/nginx.conf

step2：

• Enter in the terminal: vi /usr/local/etc/nginx/nginx.conf, open the Nginx configuration file:

• Press ito enter the edit mode: then modify the server-related configuration - according to your actual situation. #Indicates a comment.

Explanation for the above configuration:

listen 8080； # 监听 8080端口。

# 当 location 匹配到'/'时，代理到前端项目http://localhost:8001，端口号根据自己项目的来。我这里是8001
location / {
    
    
  proxy_pass http://localhost:8001; 
}

# 当 location 匹配到'/api'时，代理到后端项目http://localhost:8000，端口号根据自己项目的来。我这里是8000
location /api/ {
    
    
  proxy_pass http://localhost:8000;
  # 把 host 传过去。因为做代理后，host 不一样了。
  # proxy_set_header：允许重新定义或者添加发往后端服务器的请求头。可设置请求头，并将头信息传递到服务器端
  proxy_set_header Host $host; 
}

proxy_set_header：

Syntax: proxy_set_header field value;
field: the item to be changed, which can be understood as the name of the variable, such as host
value: the value of the variable

• After modification, 1. Press escto exit the editing mode, 2. Enter :wqto save the configuration file and exit.

step3：

• Then enter in the terminal nginx -t to test whether the configuration file has syntax errors. The figure below is correct.

• After confirmation, enter nginxto start .

step4：

• Finally, we can enter in the browser to http://localhost:8080/access our front-end project (the port number here is the port number you listen to in the nginx configuration file). At this time, the call interface can be successfully accessed.

Supplement: picture description

The above configuration is realized: http://localhost:8080/index.htmlwhen , we will first go to nginx, and then match according to our request - if the request is /in the form of ' ', it will be proxied to the port of the front-end html, and its content Returned by nginx; if it is in /apithe form of ' ', it will be proxied to the nodejs service. (The picture comes from nodejs building a blog course)

References

Detailed Nginx configuration