vite/Vuecli配置proxy代理解决跨域问题
作者: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}`]: '', }, }, },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。