阅读数:78 评论数:0

1、基本用法

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

//请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 
//例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

2、代理多个路径到同一个target下

module.exports = {
  //...
  devServer: {
    proxy: [{
      context: ['/auth', '/api'],
      target: 'http://localhost:3000',
    }]
  }
};

//如果你想要代码多个路径代理到同一个target下, 
//你可以使用由一个或多个「具有 context 属性的对象」构成的数组：

3、忽略api前缀

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};
//请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 
//例如 /api/user 现在会被代理到请求 http://localhost:3000/user

4、忽略https安全提示

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

//默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。
//如果你想要接受，只要设置 secure: false 就行。修改配置如下：

5、自定义规则

module.exports = {
 //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        }
      }
    }
  }  
};

6、跨域

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
};
//上面的参数列表中有一个changeOrigin参数, 是一个布尔值, 设置为true, 
//本地就会虚拟一个服务器接收你的请求并代你发送该请求,

7、配置多个规则

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/img': {
      target: 'https://cdn.wangyaxing.cn', // 接口的域名
      secure: false, // 如果是https接口，需要配置这个参数
      changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
      pathRewrite: {'^/img': ''} // pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。
    }
  }
};