Vue3 vite TypeScript跨域等相关设置
最近手头有个涉及到vue3、vite、TypeScript的开发项目，前后端分离，前端请求后端的时候，浏览器调试信息里面报跨域错误，通常理解跨域应该是后端设置，但是后端代码一直没有调整过，一翻搜索后才知要在vite.config.ts中设置proxy，这是最简单的解决方式。
本人并非前端，不想花费太多时间去查证原委。
vite.config.ts这个文件，是vite创建vue3项目的时候生成的，示例文件如下：
1import { fileURLToPath, URL } from 'node:url'
2
3import { defineConfig, loadEnv } from 'vite'
4import vue from '@vitejs/plugin-vue'
5import vueJsx from '@vitejs/plugin-vue-jsx'
6
7// https://vitejs.dev/config/
8export default defineConfig((command, mode) => {
9
10 const env = loadEnv(mode, process.cwd(), '') // 载入环境变量防止硬编码
11
12 console.log("env:", env) // 打印环境变量方便调试查看哪些环境变量生效了
13
14 return {
15 plugins: [vue(), vueJsx()],
16 resolve: {
17 alias: {
18 '@': fileURLToPath(new URL('./src', import.meta.url))
19 }
20 },
21 define: {
22 __APP_ENV__: env.APP_ENV,
23 },
24 server: {
25 port: env.VITE_PORT, // 前端项目运行端口
26 https: false, // https，一般开发环境不需要
27 open: true, // 运行后直接打开一个浏览器tab
28
29 proxy: {
30 '/api': {
31 target: env.VITE_API_SERVER_URL, // 后端api接口地址：http://127.0.0.1:8080
32 ws: false, // 关闭websocket
33 changeOrigin: true,
34 rewrite: (path) => path.replace(/^\/api/, 'api'), // 类似nginx的rewrite，看你需要在路由中匹配后保留什么，根据需要填写
35 },
36 '/ws': {
37 target: env.WS_API_SERVER_URL, // 后端api websocket接口地址：ws://127.0.0.1:8888
38 ws: true, // 支持websocket
39 }
40 }
41 },
42 }
43})
如上所示，配置完成后,在vue模版的的script中，使用axios库POST请求示例，请求的目标接口为http://127.0.0.1:8080/api/xxx/
1const results = await axios.post('/api/xxx/' ,
2 {
3 'foo1': 'bar1',
4 'foo2': 'bar2',
5 }
6).then((res) => {
7 console.log('res:',res)
8}).catch((error) => {
9 console.log('error:',error)
10})
如果你对上述配置还有疑问，可查询官方vite官方配置文档, 细心阅读对应的子模块。
最后修改于： Monday, August 28, 2023
版权申明:
- 未标注来源的内容全部为原创，未经授权请勿转载（因转载后排版往往错乱、内容不可控、无法持续更新等）;
- 非营利为目的，演绎本博客任何内容，请以'原文出处'或者'参考链接'等方式给出本站相关网页地址(方便读者)。