【nodejs学习笔记】本地用Nginx实现反向代理：解决跨域问题

写在前面

这是我学习Nodejs时做的笔记——
问题：本地同时启动前后端项目，前端页面请求后端接口的时候跨域，该如何解决？ （本文仅记录方法一）。

方法一：Nginx反向代理

方法二：CORS

Nginx简介

• 一款高性能的web服务器。
• 一般用作反向代理、静态服务、负载均衡。

反向代理、正向代理

• 反向代理：客户端无法控制，对客户端来说就是个黑盒。
• 正向代理：客户端能控制，比如在自己电脑装代理工具来访问公司内网。

Nginx反向代理流程

1. 当客户端发起请求到 Nginx，Nginx 会解析请求地址是否需要转发；
2. 如果需要，则通过 proxy_pass 转发到相应地址。
3. 将请求得到的结果返给客户端。

Nginx 下载

1. windows: 下载地址
2. mac: brew install nginx (当然，这样做的前提是：已经下载安装了Homebrew）

补充：Mac 安装 Homebrew 的方法

Nginx 命令（Mac）

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

进行反向代理（以Mac为例）

step1：

• 打开终端，输入 nginx -t。可以看到 Nginx 配置文件地址：/usr/local/etc/nginx/nginx.conf

step2：

• 在终端输入：vi /usr/local/etc/nginx/nginx.conf ，打开 Nginx 配置文件:

• 按i进入编辑模式：然后修改server相关配置——根据自己实际情况来。#表示注释。

上述配置的说明：

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：

语法: proxy_set_header field value;
field: 要更改的项目，可以理解为变量的名字，如 host
value: 变量的值

• 修改完毕之后，1.按 esc 退出编辑模式，2.输入:wq 保存配置文件并退出。

step3：

• 然后在终端输入 nginx -t ，测试配置文件是否有语法错误。如下图就说明无误。

• 确认无误后，输入 nginx 启动。

step4：

• 最后，我们就可以在浏览器输入 http://localhost:8080/ 访问我们的前端项目（这里的端口号就填你在 nginx 配置文件 listen 的端口号）。这时候调用接口就可以成功访问到了。

补充：图片说明

上述配置即实现：当我们在浏览器访问 http://localhost:8080/index.html时， 会先到 nginx，然后再根据我们的请求去匹配——如果请求是 ‘/’ 这种形式，会代理到前端 html 的端口，并把它的内容通过 nginx 返回；如果是 ‘/api’ 这种形式，则代理到 nodejs 的服务上。（图片来自nodejs搭建博客课程）

参考资料

Nginx 配置详解