Webpack-dev-server的proxy用法

前言

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。

解决开发环境的跨域问题

在webpack.config.js中配置

使用一:

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

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

使用二：

如果你想要代码多个路径代理到同一个target下,

你可以使用由一个或多个「具有 context 属性的对象」构成的数组：

使用三:

如果你不想始终传递 /api ，则需要重写路径：

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

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

使用四:

默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。

如果你想要接受，只要设置 secure: false 就行。修改配置如下：

使用五:

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。

在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。

例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：

解决跨域原理：

上面的参数列表中有一个changeOrigin参数, 是一个布尔值, 设置为true, 

本地就会虚拟一个服务器接收你的请求并代你发送该请求

vue-cli中proxyTable配置接口地址代理示例

修改 config/index.js

更多参数

dev-server使用了非常强大的http-proxy-middleware,http-proxy-middleware基于http-proxy实现的，

可以查看 http-proxy 的源码和文档:https://github.com/nodejitsu/node-http-proxy。