1.webpack配置代理
1.1配置信息
module.exports = {

//...

devServer: {

proxy: {

'/api': {

target: 'http://www.baidu.com/',

pathRewrite: {

'^/api': ''

},

changeOrigin: true,

secure: false,

}

}

}

}
1.2配置中主要的参数说明
1.2.1 ‘/api’
捕获API的标志，如果API中有这个祖父出窜，那么就开始匹配代理，比如API请求/api/users，会被代理到http://www.baidu.com/api/users。
 
1.2.2 target
代理API地址，就是需要跨域的API地址。地址可以是域名，也可以是IP地址。如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败
 
1.2.3 pathRewrite
路径重写，也就是说会修改最终请求的API路径。比如访问的API路径/api/users，设置pathRewrite: {'^/api' : ''},后，最终代理访问的路径为：http://www.baidu.com/users，这个参数的目的是给大力命名后，在访问时把命名删除掉。
 
1.2.4 changeOrigin
这个参数可以让target参数是域名
 
1.2.5 secure
secure: false，不检查安全问题。设置后，可以接受运行在HTTPS上，可以使用无效证书的后端服务器。
 
1.2.6 其他参数配置查看http-proxy-middleware文档
其他的配置参数等信息，可以查看这里：https://github.com/chimurai/http-proxy-middleware
 
2.vue-config配置代理
module.exports = {

//...

devServer: {

proxy: {

'/api': {

target: 'http://www.baidu.com/',

pathRewrite: {

'^/api': ''

}

}

}

}

}
webpack

devServer.proxy 

object [object, function]

当拥有单独的API后端开发服务器并且希望在同一域上发送API请求时，代理某些URL可能会很有用。

开发服务器使用功能强大的 http-proxy-middleware 软件包。 查看其 documentation 了解更多高级用法。 请注意，http-proxy-middleware 的某些功能不需要target键，例如 它的 router 功能，但是仍然需要在此处的配置中包含target，否则webpack-dev-server 不会将其传递给 http-proxy-middleware）。

使用后端在 localhost:3000 上，可以使用它来启用代理：

webpack.config.js

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

现在，对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users。

如果不希望传递/api，则需要重写路径：

webpack.config.js

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

默认情况下，将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要，可以这样修改配置：

webpack.config.js

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

有时不想代理所有内容。 可以基于函数的返回值绕过代理。

在该功能中，可以访问请求，响应和代理选项。

  • 返回 null 或 undefined 以继续使用代理处理请求。
  • 返回 false 会为请求产生404错误。
  • 返回提供服务的路径，而不是继续代理请求。

例如。 对于浏览器请求，想要提供 HTML 页面，但是对于 API 请求，想要代理它。 可以执行以下操作：

webpack.config.js

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';
          }
        },
      },
    },
  },
};

如果想将多个特定路径代理到同一目标，则可以使用一个或多个带有 context 属性的对象的数组：

webpack.config.js

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

请注意，默认情况下不会代理对 root 的请求。 要启用根代理，应将 devServer.index 选项指定为虚假值：

webpack.config.js

module.exports = {
  //...
  devServer: {
    index: '', // specify to enable root proxying
    host: '...',
    contentBase: '...',
    proxy: {
      context: () => true,
      target: 'http://localhost:1234',
    },
  },
};

默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 以覆盖此行为。 在某些情况下，例如使用 name-based virtual hosted sites，它很有用。

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};
————————————————