vite 跨域配置
2023-06-13 09:17:39 时间
前言
跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题。
跨域可以在前端通过 代理服务器实现,也可以通过后端配置请求头实现,具体情况具体选择。 若线上环境跨域则只能通过后端配置请求头解决。
代码
在vite,config.ts
里配置
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替换为空
}
}
}
})
相关文章
- Spring学习笔记(三十五)——小技巧:配置全局跨域、全局⽇期格式化、读取本地json
- Wildfly 跨域相关响应头配置
- devServer配置实现跨域
- nginx配置了跨域无效解决办法
- Nginx配置反向代理
- Vue 跨域配置「建议收藏」
- Spring Boot跨域配置
- axios实现跨域三种方法_vue跨域配置
- (CORS) Nginx配置跨域
- nginx跨域访问配置_cors跨域访问不了
- vue3+vite+axios中proxy跨域配置
- React脚手架配置代理解决跨域问题
- webpack配置proxy反向代理,解决跨域问题
- linux网络配置工具的使用
- Nginx反向代理配置可跨域详解程序员
- Oracle 参数 CIRCUITS 官方解释,作用,如何配置最优化建议
- Oracle 参数 DB_FLASHBACK_RETENTION_TARGET 官方解释,作用,如何配置最优化建议
- Oracle 参数 USE_LARGE_PAGES 官方解释,作用,如何配置最优化建议
- Oracle 参数 WALLET_ROOT 官方解释,作用,如何配置最优化建议
- 总线Linux下I2C总线的配置与使用(linux下的i2c)
- Linux 网络配置:优化参数实践(linux网络配置参数)
- Linux系统配置路由器快速上手指南(linux配置路由器)
- Squid配置文档
- 快速入门Redis:初始化配置数据redis(初始化配置数据redis)
- Redis配置指南从性能优化中获益(redis配置性能优化)
- Windows下Nginx+PHP5的安装与配置方法