vite 跨域配置

前言

跨域一样平常出如今开辟阶段，由于线上环境前端代码被打包成了静态资源，因而不会出现跨域题目。
跨域可以在前端通过 署理服务器实现，也可以通事后端配置请求头实现，详细环境详细选择。
若线上环境跨域则只能通事后端配置请求头办理。
代码

在vite,config.ts里配置

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
4. export default defineConfig({
5.   plugins:[vue()], // 配置需要使用的插件列表，这里将vue添加进去
6.   // 强制预构建插件包
7.   optimizeDeps: {
8.     include: ['axios'],
9.   },
11.   // 打包配置
12.   build: {
13.     target: 'modules',
14.     outDir: 'dist', //指定输出路径
15.     assetsDir: 'assets', // 指定生成静态资源的存放路径
16.     minify: 'terser' // 混淆器，terser构建后文件体积更小
17.   },
19.   // 本地运行配置，及反向代理配置
20.   server: {
21.     cors: true, // 默认启用并允许任何源
22.     open: true, // 在服务器启动时自动在浏览器中打开应用程序
23.     //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
24.     proxy: {// 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
25.       '/api': {
26.         target: 'http://localhost/3000', // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
27.         changeOrigin: true,
28.         ws: true,  // 允许websocket代理
29.         rewrite: (path) => path.replace(/^\/api/, '') // 将api替换为空
30.       }
31.     }
32.   }
33. })

复制代码

来源：https://blog.csdn.net/qq_45872039/article/details/129718483
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！