前言
跨域一般出现在开发阶段，由于线上环境前端代码被打包成了静态资源，因而不会出现跨域问题。
跨域可以在前端通过 代理服务器实现，也可以通过后端配置请求头实现，具体情况具体选择。
若线上环境跨域则只能通过后端配置请求头解决。文章来源：https://www.toymoban.com/news/detail-509192.html
代码
在vite,config.ts里配置文章来源地址https://www.toymoban.com/news/detail-509192.html
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
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替换为空
}
}
}
})
到了这里，关于vite 跨域配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
