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

[shizhibuyu2023]

这是开发环境 vite 给你开的反向代理，解决跨域和路径问题。线上你没有反向代理的话，你需要先解决跨域问题，然后在后端处理 /api 啊，用中间件之类的把这个前缀去掉

[jones2000]

后台把跨域限制关掉呗

[CHTuring]

你身为后端就应该明白，跨域和 Vite 这种打包器无关，甚至和前端无关。
Vite 本地开发可以 proxy 完全是 Vite 方便开发人员而做的功能。
你要做的是在把这些代码删掉，然后后端开启跨域白名单，或者配置 Ngnix

[microchang]

。。。注意下项目里面，应该有个.env.production 文件，里面 VITE_API_URL = 怎么配的看一下

[shadowyue]

哥你真是后端吗？跨域完完全全是需要后端来处理的。。。前端改不了一点，这是浏览器对 http 请求的安全规范。

[suyuyu]

感觉你直接就不明白跨域

[suyuyu]

看错了，抱歉，我自己打嘴 (

[KongLiu]

CORS 了解一下

[Ritr]

production 环境变量没弄好

[1183460943]

本地代理就是给开发时候用的啊， 环境上要不用 nginx 搞个同样逻辑的代理，要不服务端开 CORS

[wisetc]

你的配置没错，不过那个只是 devsever ，可不是生产环境哦，打包得另求，而且前端调用后段 api 真的需要 proxy 吗，明白了，是为了设置 origin 吧，那么是不是前端代码那里写错了呢，proxy 配置是魔改，前端代码打包才是真实

[ocyang1845]

你可以把你的 两个环境的 env 文件 相关内容贴出来看下

[bsg1992]

proxy 只用于开发环境啊 ，生成还是得指定 host 。 不指定 host 肯定用的当前部署的 host 作为请求地址啊

[cin]

配置个应用到 生产环境使用的 API_URL 变量, 或者打包时把前端输出到后端的 public 目录.

[jspatrick]

如果你用的是 axios ，感觉你需要配置的是 baseURL ，通过环境变量切换不同的 baseURL

[xitler]

你这个环境不支持 nginx 的话，那你打包出来的 dist 打算用啥东西访问

[NessajCN]

你 po 一下后端接口我看看你怎么设置允许跨域的

[78786381]

@sseven nginx 为什么要有 rewrite ，不是因为后端所有的开头地址没有 api ，然后去除的吗？为什么写 api 开头，因为不写 api 开头你知道什么是页面，什么是请求吗

[unco020511]

我们现在都是代码里直接用线上域名,然后开发机器上通过代理工具(比如 whistls)来处理跨域和环境区分,代码无需任何区分

[shunia]

不是，你到底有没有代码控制权啊，给我整蒙了。。。
如果实在不能改代码，那我能理解这是咋回事，不然好像有点。。。

前端非要请求/api 下的接口？后端非不提供/api 的接口？