webpack之配置proxy篇 | 您所在的位置:网站首页 › 设置proxy › webpack之配置proxy篇 |
写在前面
项目是vue2+webpack构建的。在前端开发过程中,经常会碰到跨域的问题,下面我们来看看这个vue2+webpack构建的项目,是如何使用别人的接口,且不需要后端配置Nginx等东西搞定跨域问题的。 项目结构如下: 我们的proxy配置得需要在webpack.config.js里面配置。我的项目下的是webpack5以上的版本,所以官方文档的链接在这里。当前,webpack4和webpack5版本的devServer.proxy这一个模块几乎一模一样。可以相继浏览一下文档. 例子:基本情况 module.exports = { // ... devServer: { proxy: { '/api': 'http://localhost:3000', } } }就是 对/api/users的请求将请求代理到http://localhost:3000/api/users。 如果不希望传递/api,则需要重写路径: 重写 pathRewrites module.exports = { // ... devServer: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' }, } } }默认情况下,将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要,可以这样修改配置: 证书https secure module.exports = { // ... devServer: { '/api': { target: 'https://other-server.example.com', secure: false, } } }如果不想代理所有内容,可以基于函数的返回值绕过代理。 例如: 对于浏览器请求,想要提供html页面,但是对于api请求,想要代理它。可以这样修改配置: 绕过原则 bypass module.exports = { devServer: { proxy: { '/api': { target: 'https://other-server.example.com', bypass: function (req, res, proxyOptions) { // 可以自行去打印一下这三个参数, 一般用得最多的还是req.headers // 如果返回来的是html if (req.headers.accept.indexOf('html') !== -1) { return '/index.html' // 用我们写的index.html代理原接口返回的html } }, } } } }多个路径代理到同一个目标 如果想将多个特定路径代理到同一目标,则可以使用一个或多个带有 context 属性的对象的数组: module.exports = { //... devServer: { proxy: [ { context: ['/auth', '/api'], target: 'http://localhost:3000', }, ], }, };root根代理 / 默认情况下不会代理对 root 的请求。 要启用根代理,应将 devMiddleware.index 选项指定为虚假值: module.exports = { //... devServer: { devMiddleware: { index: false, // 指定启用根代理 }, proxy: { context: () => true, target: 'http://localhost:1234', }, }, };保留主机头来源 默认情况下,代理时会保留主机头的来源,可以将 changeOrigin 设置为 true 以覆盖此行为。 在某些情况下,例如使用 name-based virtual hosted sites,它很有用。 module.exports = { //... devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, }, }, }, }; 代理B站比如说项目中,我要请求b站接口,可以通过设置proxy代理过去,绕过跨域。 比如: 接口: api.bilibili.com/x/web-inter… 简单配置 devServer: { proxy: { '/x': 'https://api.bilibili.com' } }接口写成 以为可以通过了, 但是来了个403, 这个报错其实就是b站监测到我们的referer和origin不是来自他们自己的域名,给返回了403 那么解决方法就是把referer和origin都改成https://t.bilibili.com(他们信任的域名),就可以通过了。 具体写法是: proxy: { '/x': { target: 'https://api.bilibili.com', secure: false, bypass: (req, res, proxyOptions) => { if (req.headers && req.headers.referer) { url = new URL(req.headers.referer); req.headers.origin = 'https://t.bilibili.com'; req.headers.referer = 'https://t.bilibili.com'; } } }这样就可以代理成功了。 webpack proxy只能用作于开发阶段,临时解决本地请求服务器产生的跨域问题,并不适用线上环境。线上环境还需要后端Nginx设置一下跨域。 分享就是一种输出。 |
CopyRight 2018-2019 实验室设备网 版权所有 |