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

最新推荐文章于 2025-06-23 09:34:13 发布

eknown

最新推荐文章于 2025-06-23 09:34:13 发布

阅读量6.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： java web vue 环境配置工具一步一步成为java全栈文章标签： nginx 前后端分离 vue.js

本文链接：https://blog.csdn.net/qq_28379809/article/details/86532753

java web 同时被 3 个专栏收录

27 篇文章

订阅专栏

环境配置

12 篇文章

订阅专栏

一步一步成为java全栈

6 篇文章

订阅专栏

本文介绍如何使用Nginx反向代理解决前后端分离项目的跨域问题，详细步骤包括Nginx的下载、配置文件的编辑、前后端项目代理配置的添加，以及启动Nginx代理与项目的命令。同时，文章还讨论了解决使用Nginx后访问速度慢的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

一、Nginx下载

前往Nginx官网http://nginx.org/下载压缩包。
Alt text

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

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

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

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

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

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

三、启动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，网页正确打开：
在这里插入图片描述

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

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

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