vue-cli配置跨域

1.在项目中新建vue.config.js文件

方式1：

缺点：只能配置一个代理，不能灵活控制是否走代理，会优先请求前端资源，当前端资源不存在，再转发代理服务器

module.exports = defineConfig({
  devServer: {
    proxy: 'http://localhost:4000'  //跨域域名
  },
})

方式2：

优点：

可以配置多个代理
可以灵活控制请求是否走代理

请求接口路径为:/list '/api-one'是自定义名称

例如：http://localhost:4000/api-one/list

问题：请求是发送过去了，但服务器接收到的路径是：/api-one/list,得把'/api-one'去掉

配置了pathRewrite:{'^/api-one':''}, 接口路径前面有'/api-one'就直接赋值为空

module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api-one': {
        target: 'http://localhost:4000',  //跨域域名1
        pathRewrite:{'^/api-one':''},   
        // ws: true,  //用于支持websocket
        // changeOrigin: true  //用于控制请求头中的host值
      },
      '/api-two': {
        target: 'http://localhost:3000',  //跨域域名2
        pathRewrite:{'^/api-two':''}, 
        // ws: true,  //用于支持websocket
        // changeOrigin: true
      },
    }
  },
})

vue-cli配置跨域

悦读