Nginx配置前后端分离项目代理--解决跨域问题

野性酷女 2022-03-25 00:50 1201阅读 0赞

最近刚接触到前后端分离项目，遇到跨域问题，想到使用`Nginx`反向代理可以解决，于是查了一些资料，简单地设置了一下。

我的项目前端是`vue.js`，后端是`springboot+SSM`。  
当然，这个配置跟使用了什么项目无关，仅跟两个项目各占用的端口有关。

## 一、Nginx下载 ##

前往`Nginx`官网[http://nginx.org/][http_nginx.org]下载压缩包。  
![Alt text][]

在Windows平台下，选择Windows版本，下载后解压打开：  
![Alt text][Alt text 1]

添加代理配置的文件为：`/conf/nginx.conf`。使用Notepad++或其他编辑器打开进行编辑即可。

--------------------

## 二、分别添加前后端项目代理配置 ##

下面介绍一下如何添加前后端代理的配置：  
首先，默认vue.js项目启动会占用8080端口，而SpringBoot项目配置如下：

server:
      port: 8090
      servlet:
        context-path: /api

那么，我们在Nginx中修改配置如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70]

--------------------

## 三、启动Nginx代理与项目 ##

Nginx相关的命令，如下（首先需要进入nginx解压后的目录）：

start nginx 或 nginx.exe // 启动
    nginx.exe -s stop 或 nginx.exe -s quit // 关闭nginx，前者为迅速关闭，后者为保存信息再关闭
    nginx.exe -s reload // 重新载入nginx，配置信息被修改时使用
    nginx.exe -s reopen // 重新打开日志文件
    nginx -v // 查看版本

使用命令`nginx.exe`启动Nginx  
分别启动前后端项目，在浏览器输入`http://localhost:8999`，网页正确打开：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 1]

--------------------

## 四、使用Nginx后访问慢的问题 ##

之前在配置信息中使用的`server`是`localhost`，打开网站时发现速度特别慢（几十秒钟）。查了一些资料，原因是`hosts`文件没有配置`localhost`指向`127.0.0.1`这个本机`ip`。  
解决办法就是像我上面的配置一样，把`localhost`改成`127.0.0.1`即可。

注：从问题原因看，修改主机上关于localhost的配置应该也是可以解决这个问题的。我尝试了一下，没有效果（不知道是不是需要重启系统才行）。

[http_nginx.org]: http://nginx.org/
[Alt text]: /images/20220325/a9776b8b4e8a4bd8b6900f7334e2a4f1.png
[Alt text 1]: /images/20220325/d6659afa8e204b30b9371c0ef18d89cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70]: /images/20220325/4f4a37e1c1b2406c9c4e1456198e29b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 1]: /images/20220325/4b6e8b66748c456ca9202d672a3c7d40.png