问题是这样的:

我使用了 vue3+vite 开发,vite 配置了代理如下:
```
proxy: {
      '^/api*': {
        target: 'http://localhost:9961/',
        changeOrigin: true,
        // 替换掉/api 路径
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
```
以上在本地开发时一切很美好,都正常,但是! 当打包成静态资源部署上服务器后恶心的就来了
vite 的代理失效了,访问路径变成了前端页面路径+/api/xxx ,查了一下这种情况需要使用 nginx 代理/api 路径,然后转发到后台服务。

但是啊,我做的这个东西部署条件不支持装 nginx 啊,就不能直接访问后端接口吗?我后端接口都已经配置好了允许跨域,不管我是写死路径还是删除 vite 的 proxy 配置,最终打包后都会给我把请求路径替换成 /api/xxx

我只想要直接请求后端接口为啥这么难?


还有个让我很不解的地方,为啥用`npm run preview`一切都正常,我配好的后端接口地址也会正常请求,一旦放到服务器上就又变成了/api/xxx
举报· 763 次点击
登录 注册 站外分享
58 条回复  
Baymaxbowen 小成 2024-7-10 17:17:55
你这个 proxy 只是本地的,线上不行,如果你不需要 api 的话,你可以在本地不加 api 的前缀
loserc6 小成 2024-7-10 17:19:13
接口地址与代理没关系,你看看你接口地址怎么写的吧
sjhhjx0122 小成 2024-7-10 17:19:50
不管是 dev 还是 preview 只是本地代理,你应该配个环境变量来区分你的开发环境和正式环境请求前缀
zhtyytg 小成 2024-7-10 17:19:55
proxy 本来就是开发服务器的代理
tog 小成 2024-7-10 17:21:08
不要开代理好了,服务端跨域直接放开
PeakGao666 小成 2024-7-10 17:22:02
我有个好办法,直接让后端做一层 api 反代不就完了
Vegetable 小成 2024-7-10 17:25:30
你发送请求的地方使用了相对地址,比如登录,你写的是 /login 。
把这个地址改成绝对地址,比如 http://www.baidu.com/login ,这样打包出来的页面就会访问绝对地址了。

接下来你会面临另一个问题,开发环境怎么办?如果你的所有环境都配置了 cors ,那你可以直接删除这个 proxy ,让页面直连服务器就可以了。你还需要通过通过 VITE_ENV 控制当前是什么环境,来访问不同的后端地址。

进一步,你还要考虑怎么在打包期间传入生产地址,而不是写死在代码或者 vite.config 里边。建议找一个开源的管理后台项目学习一下他们的 http 部分代码。
Elissa 小成 2024-7-10 17:25:40
@ReinerShir
1. proxy 代理只是本地的代理
2. 本地运行时会通过 proxy 配置将接口地址中 api 替换成空的,打包后的和 proxy 代理就没关系了,不会替换字符串,也不会代理
3. 线上总是出现/api/xxx ,检查下.env.production 中接口地址是不是包含了 api
murmur 小成 2024-7-10 17:27:49
我们的后端接口都是全跨域支持,因为要给移动端用,移动端是虚拟的 http 服务器随机端口,没有域名这一说

所以不代理也可以访问

搞那么麻烦干嘛
返回顶部