若依前后端分离前端部署nginx反向代理后刷新页面失效及用户登录后404问题解决
MayoiKaze 2024-07-15 10:03:01 阅读 54
目录
问题背景nginx配置(解决页面刷新失效问题)注意点
用户登录后出现404问题描述问题解决
问题背景
项目需要部署到服务器之后由第三方进行了反向代理,所以我们必须适配第三方的url。由于第一次部署固定好路由格式的前端项目,途中遇到了比较多的问题。
nginx配置(解决页面刷新失效问题)
首先<code>nginx.conf要配置正确,核心配置如下:
server {
listen 前端端口;
server_name 服务器ip;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root dist所在目录/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass 后端访问url;
}
}
注意点
服务器ip可以是代理之后的urltry_files $uri $uri/ /index.html;
可以让页面刷新后重新定向,加上就能解决刷新页面失效问题若依前后端分离部署时带后缀/prod-api
,定向时需要加上后端访问url即在前端vue.config.js
中,proxy
里的[process.env.VUE_APP_BASE_API]
中target
后填写的url
用户登录后出现404
问题描述
用户登录后页面重定向到404页面,点击返回首页后才能进入到正常页面
问题解决
前端需要增设子路径,如:/app
(参考若依文档->前端手册->应用路径)一定要看文档!!!
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。