问题
我将前端vue和后端Spring Boot全部都部署到了宝塔上,后端项目部署成功后直接请求接口成功,运行本地vue项目使用代理服务器访问接口也是成功的,但是部署到vue上的项目访问接口报404错误
解决
经向某位大佬求教后找到了解决办法:需要配置宝塔上的nginx代理才行,解决步骤如下:
- 点击nginx的设置(如果没有nginx就在同一页面搜索安装即可)
- 点击配置修改,鼠标滑动到页面最底部,复制红框里这个路径
/www/server/panel/vhost/nginx
(配置修改这个文件尽可能不要做改动)
- 点击文件,复制该路径
- 在该页面新建一个以
.conf
为结尾的配置文件,比如:haha.conf
- 双击
haha.conf
进行编辑,内容如下:
server {
listen 81; // 监听81端口
server_name localhost; // 因为我的后端和前端都部署到了宝塔上,所以server_name可以直接写localhost
// 配置代理
/*
第一个代理含义:
我的网站地址是http://120.77.8.124:81/#/login/passLogin,
当它看到81后的第一条斜杠时会到`/www/wwwroot/120.77.8.124`路径底下找index.html页面
*/
location / {
index index.html;
root /www/wwwroot/120.77.8.124;
}
/*
配置接口代理
我前端的代理服务器代码块下的图所示。
^~/api/:当nginx看到路由中包含/api/会自动将/api/去到,并将/api/前边的部分替换成`http://localhost:15050/`
*/
location ^~/api/ {
proxy_pass http://localhost:15050/;
}
}
- 修改
vue.config.js
文件里的代理服务器
本地测试和部署到服务器上后,请求后端的接口地址可能变了,所以有时候需要修改下。
注释掉的那一行是用于本地测试的,部署到线上后应该改成target: 'http://120.77.8.124:15050'
。
注意:vue.config.js
文件是前端vue项目里的,宝塔配置nginx
看前边那些就行了。
经过上边这些步骤就能成功访问接口了