一般这种情况,都是在前端配置了反向代理,如下图:
在这里插入图片描述
图中的 api 就可以代替 target 中的后台地址,这个在线上环境是有问题的,api 在线上环境就变成了字符串,所以所有接口都会出现404问题

前端解决方案如下:

在项目目录中添加 .env 文件,配置线上打包地址
在这里插入图片描述
在 main.js 中打印查看是否正确
在这里插入图片描述
添加 axios 拦截器,线上环境把 /api 截取掉
在这里插入图片描述
OK,这样接口404问题就在前端解决了

在服务器上解决接口404问题:

登录服务器,找到nginx的安装目录下:cd /etc/nginx
打开配置文件 vi nginx.conf
按 i 修改,新增

 location /api {
		   	  proxy_set_header   Host             $host;
		      proxy_set_header   x-forwarded-for  $remote_addr;
		      proxy_set_header   X-Real-IP        $remote_addr;
		      proxy_pass http://www.baidu.com; // 接口地址,如果在同一个服务器上,可以直接这样写
}  

保存退出,先esc,然后保存 :wq!
nginx支持热启动,所以直接重启命令 service nginx reload
nginx反向代理生效了,现在可以继续用代理,接口请求成功

Logo

前往低代码交流专区

更多推荐