后端初学 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

[Baymaxbowen]

你这个 proxy 只是本地的，线上不行，如果你不需要 api 的话，你可以在本地不加 api 的前缀

[loserc6]

接口地址与代理没关系，你看看你接口地址怎么写的吧

[sjhhjx0122]

不管是 dev 还是 preview 只是本地代理,你应该配个环境变量来区分你的开发环境和正式环境请求前缀

[zhtyytg]

proxy 本来就是开发服务器的代理

[tog]

不要开代理好了，服务端跨域直接放开

[ReinerShir]

@sjhhjx0122 配置了的，.env.production ，然后接口地址用的是变量，打包命令用的 npm run build --production
但是不管我怎么折腾，部署上去后都变成了/api/xxx

[PeakGao666]

我有个好办法，直接让后端做一层 api 反代不就完了

[Vegetable]

你发送请求的地方使用了相对地址，比如登录，你写的是 /login 。
把这个地址改成绝对地址，比如 http://www.baidu.com/login ，这样打包出来的页面就会访问绝对地址了。

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

进一步，你还要考虑怎么在打包期间传入生产地址，而不是写死在代码或者 vite.config 里边。建议找一个开源的管理后台项目学习一下他们的 http 部分代码。

[Elissa]

@ReinerShir
1. proxy 代理只是本地的代理
2. 本地运行时会通过 proxy 配置将接口地址中 api 替换成空的，打包后的和 proxy 代理就没关系了，不会替换字符串，也不会代理
3. 线上总是出现/api/xxx ，检查下.env.production 中接口地址是不是包含了 api

[murmur]

我们的后端接口都是全跨域支持，因为要给移动端用，移动端是虚拟的 http 服务器随机端口，没有域名这一说

所以不代理也可以访问

搞那么麻烦干嘛

[sseven]

我感觉这个 proxy 的配置不是一个好的实践，api 开头，代理又要去掉 api ，那何必要写 api ？
如果有些必须理由要 api 开头，用一个类似 baseUrl,commonPrefix 的东西，再通过环境变量来区分 build 和 dev 比较好控制

[Vegetable]

没注意看，你还配置了 rewrite ，在后端无法配合你的情况下你不能这么做。你现在不得不从两个选项里选一个

1. 后端网关处理/api
2. 去掉代理，前端代码去掉/api

[sleepm]

不要打包（除非线上和开发环境没啥区别，包括环境变量，后端）
在服务器 build
访问路径写成和后端一样的
代理是为了本地开发解决跨域，服务器上不需要解决跨域，就不需要配置代理

[zhhqiang]

request.js 文件 域名 打包的时候 指定成 你的服务端地址呢。

[BiChengfei]

桀桀桀，现在的前端是这样的

[xiaowunai]

vite 的代码，只是在开发环境的时候用 node 帮你转发了一次，跨域只是浏览器规则限制
当你打包完了以后，就是一个前端项目，跨域你自然要用 nginx 什么的处理
所以你以前真的是后端么？

[pelloz]

额，你真的是后端么...

[NoManPlay]

开发环境和生产环境通过环境变量配置区分就行了

[wyl986]

用 nginx 转发一下/api 到后端就完了，最简单最通用，不需要改任何代码

[zhhbstudio]

我觉得这事有很大原因是 proxy 上层 key 从 devServe 改为 server 了。

这个 proxy 配置只是给你开发时候方便调试用的。。。