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

[gp0119]

你的接口是不需要 /api 前缀的？在 axios 配置文件 baseURL 里去掉 /api, 在 proxy 配置文件 target 里路径后面加上 api ,估计测试环境里刚好把你 baseURL 里 /api 前缀替换掉了

[ColdBird]

你后端允许跨域，那就配置网络请求的全路径不要用资源域名就得了呗，这点东西搞不明白吗？大部分后端接口不允许跨域，所以才需要访问资源域名，在资源域名通过 nginx 配置代理。

[bojackhorseman]

@unco020511 #40
我一般都是在 .env 文件里配置一个 VITE_APP_HOST ，
本地开发 .env.development 里 VITE_APP_HOST=/api
正式环境的 .env.production VITE_APP_HOST=正式环境接口地址
然后在 axios 里 axios.defaults.baseURL = import.meta.env.VITE_APP_API_HOST ，vite 配置按照楼主写的，target 设置为测试环境接口地址
这样请求的时候本地开发请求 /api 会被 vite 代理到测试环境下而没有跨域问题。打包部署到线上请求的就是正式环境接口，更不会有跨域问题。

[bojackhorseman]

@bojackhorseman axios.defaults.baseURL = import.meta.env.VITE_APP_HOST ，手误

[sseven]

@78786381 #38 我意思是：用的地方 request('a/c'),别带 api ，request 中统一加 api 前缀。这样方便控制前缀。而不要在代码中写 request('api/a/c'). 大概率是个单页应用，是不是就不用区分页面还是请求

[xR13zp0h67njQr2S]

@sseven #65 那我估计你的理解还是错误的，proxy 那里设置 api 开头本来就是做区分的，是 node 处理还是代理，肯定不会每一个地方都写 api

[laobobo]

我知道为啥有人发了帖子说 跨域问题了

[shengchao]

作为前端，我很难理解后端对此有什么困惑的？

[monologue520]

按照你的思路解决这个问题需要使用环境变量,在前端加 baseURL 的地方通过变量做下判断就可以了

[kanepan19]

op 被点名了

https://www.v2ex.com/t/1056504#reply174

[0xD800]

你是给 axios 配置了 baseUrl='/api'吧，
我建议你了解基本的技术原理。
1. vue-router 的 history 模式，如果你是部署在后端应用中，比如放在 springboot 的 static 文件夹内，建议你直接设置为 webhashhistory ，否则你要手动处理路由，我觉得你可能会花费更多时间

2. vite 的 build.base ，这个是打包的时候把里面的引用文件都加上这个前缀，应用场景：把前端部署在某个域名的/xx 文件夹下，通过 www.example.com/xx/index.html 访问，此时也要主要 vue-router 的 history 的 base 参数

3. axios 的 baseUrl：这个是 API 接口的前缀，你可以控制在本地环境使用/api 前缀，然后用 proxy 拦截/api 前缀再转发。生产环境配置其他的 baseUrl 或者不配，看你后端地址怎么访问