前言
如果你有单独的后端开发服务器 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。