vite/Vuecli配置proxy代理解决跨域问题
更新时间:2023年12月29日 08:54:22 作者:williamyi74
这篇文章主要介绍了vite/Vuecli配置proxy代理解决跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vite/Vuecli配置proxy代理解决跨域
上代码
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 9090,
strictPort: true, // 严格端口 true:如果端口已被使用,则直接退出,而不会再进行后续端口的尝试。
/**
* @description 解决chrome设置origin:*也跨域机制,代理/api前缀到服务基地址
* 最终的地址会将axios设置的baseUrl:/dev代理拼接成[target][/dev][/xxx/yyy]
*/
proxy: {
'/dev': {
target: 'http://www.baidu.com', // 接口基地址
rewrite: path => {
console.log(path); // 打印[/dev/xxx/yyy] 这就是http-proxy要请求的url,如果服务器真实地址是没有/dev前缀的话要replace掉,如果有可以不replace
return path.replace(/^\/dev/, '');
}
}
}
},
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, '.', 'src') // 设置 @ 指向 src
}
},
})Vuecli配置
devServer: {
port: '9090',
proxy: {
[process.env.VUE_APP_PREFIX]: {
target: process.env.VUE_APP_BASEURL,
secure: true,
changeOrigin: true,
pathRewrite: {
[`^${process.env.VUE_APP_PREFIX}`]: '',
},
},
},总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在Vue 3中使用OpenLayers加载GPX数据并显示图形效果
本文介绍了如何在Vue 3中使用OpenLayers加载GPX格式的数据并在地图上显示图形,通过使用OpenLayers的GPX解析器,我们能够轻松地处理和展示来自GPS设备的地理数据,需要的朋友可以参考下2024-12-12
在vue中,v-for的索引index在html中的使用方法
下面小编就为大家分享一篇在vue中,v-for的索引index在html中的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03


最新评论