vite 跨域配置

前言

跨域一般出现在开发阶段，由于线上环境前端代码被打包成了静态资源，因而不会出现跨域问题。

跨域可以在前端通过 代理服务器实现，也可以通过后端配置请求头实现，具体情况具体选择。
若线上环境跨域则只能通过后端配置请求头解决。

代码

在

vite,config.ts

里配置

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