2024年前端最新vue配置proxy跨域代理

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

const { defineConfig } = require(‘@vue/cli-service’)

module.exports = defineConfig({

devServer:{

proxy:{

// 代理1

// 当你请求是以/api开头的时候，则我帮你代理访问到http://127.0.0.1:3000

‘/api’: {

target: ‘http://127.0.0.1:3000’,

// secure: false,// 如果是https接口，需要配置这个参数

// ws: true, //是否代理websockets， 默认值为true

 /\*

changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:3000

changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080

changeOrigin默认值为true

*/

 changeOrigin: true, // 设置请求头中的host地址，默认值为true
    //地址中的 /api 仅仅是一个请求转发标志，真正的接口中没有/api，所以在转发时重写请求路径，把/api删掉。
    pathRewrite: {'^/api' : ''}
  },
  // 代理2
  '/douyu':{
    target: 'http://open.douyucdn.cn',
     pathRewrite: {'^/douyu' : ''}
  }
}

}

#### 设置多个代理

const { defineConfig } = require(‘@vue/cli-service’)

module.exports = defineConfig({

transpileDependencies: true,

lintOnSave: false, //是否使用link检查代码

devServer: {

//方式二:设置多个代理

proxy:{

//这个路径为http://192.168.1.182:3000/douyu/wgapi/vod/front/vodrank/getTagVideos

‘/douyu’:{

//target是代理的目标路径

target:“http://192.168.1.182:3000”,

//pathRewrite重写请求的路径,实际请求的路径没有代理标识douyu,需要把斗鱼重置为空字符串

pathRewrite:{‘^/douyu’:‘’}

},

//这个路径为http://192.168.1.182:3000/huya/wgapi/vod/front/vodrank/getTagVideos

‘/huya’:{

//target是代理的目标路径

target:“http://192.168.1.182:3000”,

//pathRewrite重写请求的路径,实际请求的路径没有代理标识douyu,需要把斗鱼重置为空字符串

pathRewrite:{‘^/huya’:‘’}

}

}

}

});

#### 发送ajax请求的方法使用

getData() {
//douyu代理
  axios.post('http://localhost:8080/douyu/wgapi/vod/front/vodrank/getTagVideos', { tagId: 0 }).then(res => {
    console.log('res.data:', res.data);
  });
	//huya代理
   axios.post('http://localhost:8080/huya/wgapi/vod/front/vodrank/getTagVideos', { tagId: 0 }).then(res => {
    console.log('res.data:', res.data);
  });
},

### 最后
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)  
![](https://img-blog.csdnimg.cn/20210419193354991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcGxlcl9JSQ==,size_16,color_FFFFFF,t_70)
虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！
,t_70)
虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！