vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vite Vuecli配置proxy解决跨域

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}`]: '',
        },
      },
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文