反向代理,部署访问出现404解决

问题描述

前端设置了服务代理,正常访问后端接口,配置如下:

vite.config.ts文件

export default defineConfig({
 // 配置代理,解决跨域
 server: {
  cors: true,
  proxy: {
    '/api': {
       target: 'http://localhost:8080/', // 127:测试请求的地址0720
       changeOrigin: true, // 开启跨域
       rewrite: (path) => path.replace(/^\/api/, ''), // 将其置为空, 发请求时去掉api
     }
   }
 }
})

request.ts文件

const service = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 10000,
>headers: { 'Content-Type': 'application/json;charset=utf-8' }
});

.env文件
VITE_API_URL = /api

项目部署服务器之后,访问接口就报错404
在这里插入图片描述

解决

  1. 进入Nginx配置文件:cd /etc/nginx/

  2. 进入nginx.conf配置文件进行查看:vim nginx.conf
    在这里插入图片描述

  3. 本项目的主要配置是在sites-enabled,进行查看编辑,:q!退出编辑 — Nginx反向代理

location /api/ {
 proxy_pass http://127.0.0.1:8000/; # 转发规则
 proxy_set_header Host $proxy_host; # 修改转发请求头,让8000端口应用收到真实请求
 proxy_set_header X-Real-Ip $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

在这里插入图片描述

  1. 查看是否编辑成功:nginx -t
  2. 重启nginx:systemctl restart nginx
  3. 查看nginx状态:systemctl status nginx
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值