2024年前端最全vue配置proxy跨域代理_vue配置多个跨域proxy(1)，2024年最新前端面试题2024中高级

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

以上配置结束
方式一：设置单个代理

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

//原路径http://192.168.1.182:3000/wgapi/vod/front/vodrank/getTagVideos

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //是否使用link检查代码
  devServer: {
    // 设置代理服务器
    // 方法一：设置单个代理
    proxy: 'http://192.168.1.182:3000',
  }
});

方式二：设置多个代理

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。

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':{


## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**