vue使用代理打包之后404,405问题排查
后端的接口是正常的,并且进行了域名解析,跨域设置(这里后端的朋友注意下cors跨域)所以只需要模拟出前端环境和运维环境就可以了1、前端npm run build:prod 后生成的dist文件往tomcat- ROOT目录中一丢,ok跑起来了2、接下来是nginx的配置了...
·
今天前端说他的服务部上去发现404,405
环境:后端接口已经部署并进行了域名解析;
问题:前端本地 npm run dev没问题,打包之后出现404然后出现405;
凭借我多年的经验首先锁定到nginx上
解决思路如下:
1、模拟生产环境
-
后端的接口是正常的,并且进行了域名解析,跨域设置(这里后端的朋友注意下cors跨域)
-
所以只需要模拟出前端环境和运维环境就可以了
- 前端环境:为了紧着不麻烦别人的态度,自己随便git一个vue项目,改一下打包环境,主要如下:
vue.config.js
其中
VUE_APP_BASE_API
我这里是在下全局设置的为/apii/
,其实就是前端代理的前缀:http://前端ip:port/apii/后端接口- 运维环境:
自己刚好有云服务器,ubuntu系统,真的是难用,好多插件都没有,安装起来也是麻烦一堆,
主要是:1、装nginx,tomcat(运行前端打包后的静态文件)
- 前端环境:为了紧着不麻烦别人的态度,自己随便git一个vue项目,改一下打包环境,主要如下:
问题解决
1、前端npm run build:prod 后生成的dist文件往tomcat- ROOT目录中一丢,ok跑起来了
2、接下来是nginx的配置了
因为前端请求后端进行了代理,通过
apii
前缀访问到后端接口,所以我的思路是必须要让这个前缀
换成我后端的域名:端口
,nginx中配置代理如下:这里是不需要进行ssl证书认证的
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:8081;
}
# 主要就是这里,只需要nginx反向代理apii这个前缀就可以了,
location /apii {
# 这个是把apii前缀给去掉
rewrite ^/apii/(.*)$ /$1 break;
# 这个就是后端的接口地址
proxy_pass https://xx.xxx.com:10086;
}
........
然后就可以了~
更多推荐
所有评论(0)