Nginx配置前后端分离项目代理--解决跨域问题
最近刚接触到前后端分离项目,遇到跨域问题,想到使用Nginx反向代理可以解决,于是查了一些资料,简单地设置了一下。我的项目前端是vue.js,后端是springboot+SSM。当然,这个配置跟使用了什么项目无关,仅跟两个项目各占用的端口有关。一、Nginx下载前往Nginx官网http://nginx.org/下载压缩包。在Windows平台下,选择Windows版本,下载后解压打开...
最近刚接触到前后端分离项目,遇到跨域问题,想到使用Nginx
反向代理可以解决,于是查了一些资料,简单地设置了一下。
我的项目前端是vue.js
,后端是springboot+SSM
。
当然,这个配置跟使用了什么项目无关,仅跟两个项目各占用的端口有关。
一、Nginx下载
前往Nginx
官网http://nginx.org/下载压缩包。
在Windows平台下,选择Windows版本,下载后解压打开:
添加代理配置的文件为:/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的配置应该也是可以解决这个问题的。我尝试了一下,没有效果(不知道是不是需要重启系统才行)。
更多推荐
所有评论(0)