后端初学 vue3+vite 快被这个打包+跨域问题烦死了！

[ReinerShir]

问题是这样的：

我使用了 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

[unco020511]

说实话作为一个前端新人,我一直也每没明白这个 proxy 配置是怎么个配置,经常看到先加一个 api,然后又 rewrite 去掉 api,不太理解

[xR13zp0h67njQr2S]

@unco020511 #41 加 api 是本地开发的时候用来做请求代理，让访问 api 的请求自己不处理，都走代理，rewrite 掉 api 是因为后端的接口地址没有 api ，如果后端有地址有 api 比如用 tomcat 启动的这种，加上 api 就可以删除 rewrite

[TimPeake]

摒除跨域/前端本地开发代理方便等原因 ，api 前缀相关问题，出现这个问题的根本原因是因为你的后端项目接口没有统一的路由前缀，有统一的前缀，你这个问题就好理解了。

[unco020511]

@78786381 #42 那么在实际发起接口请求时,是用带域名的全路径还是相对路径?发起请求时,域名需要区分环境吗

[5200]

你这个问题问的，让前端和后端都看懵了😂

[Marthemis]

1.为什么要加上/api ，而又去掉/api

[kyznever]

后端搞个 CORS 。还要啥代理啊

[Marthemis]

1.为什么要加上/api ，而又去掉/api
是因为前端想在开发时去代理全部的 api 接口而不去代理静态资源等请求（其实这里用 /proxy 前缀更合适）但是后端的接口一般不带前缀。
2.如何避免后端配合前端改动，例如要求后端接口统一加上 /api 前缀
可以在前端的请求库例如 axios 配置一个 baseURL,写上 process.env.node_env === 'development' ? '/api' : '/'(或者后端接口部署的服务器域名)

[Marthemis]

至于为什么会发展出这些前端代理，是因为以前有很多后端（特指水平差的）不懂跨域也不愿意帮助去解决跨域...

[JayZXu]

静态资源托管的地方都能配置反向代理：无论是传统的 nginx ，Apache 或者后端服务都能做到

[Marthemis]

当然了，你这里的情况一定是接口 url 前配置了/api （直接或者间接）。开发环境被 rewrite 了而生产环境没有。可以根据这个思路去找一下各个配置文件或者代码文件

[xR13zp0h67njQr2S]

@unco020511 #44 都可以，看运维和你们前后端安排，都可以完成这个工作

[MoonWalker]

说句不爱听的....跟后端初学不初学的无关

[Torpedo]

@pelloz #17 在某些规模不小的厂，很多后端配跨域头都搞不定的。合作过的至少有 2 、30 不行

[GOURIDE]

后端不是有拦截器过滤器么，直接改响应头跟 nginx 效果一个样。问题很小白

[DOLLOR]

vite 里的“代理”，是给 coding 时候用的，又不是给你打包上生产的时候用的。
你打包之后，它肯定管不了你配置的那些东西了。

[sgiyy]

这个提问，能感觉你对后端也不是很懂

[hm20062006ok]

临时办法是： "在本地开发时一切很美好" ， 保持现有不要改动。 打包正式环境时： 请求库用的 Axio 吧？ 把 baseURL 写死成 https://example.com/xxxx. 比如 login 接口完整的地址是:https://example.com/api/login ，login 方法传递的 path 是‘’/login'， 那么 baseURL 就填写:https://example.com/api 。 打包完再把 baseURL 改回来。 改来改去很麻烦？ 你再去研究为什么要配置 env 吧

[zhw2590582]

既然这样，建议开发阶段不要使用 proxy ，统一让后端配置跨域

[abcde123456789]

如果后端允许跨域，就不需要设置 proxy ，开发环境和正式环境都不需要

后端允许跨域和 proxy 只存在一个就行了，都有的话会出错