引入

先看一个例子：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class App extends Component {componentDidMount(){axios.get('http:/www.dell-lee.com/react/api/header.json').then(res=>{console.log(res.data);});}render() {return (<div>Hello World</div>);}
}ReactDOM.render(<App/>, document.getElementById('root'));

这是一段非常简单的用React开发的代码，也是一种非常常见的逻辑，在componentDidMount中进行网络请求。

可以看到，我们请求的URL前面的域名是写死的。可是在实际开发过程中，可能使用的是后端提供的测试服务器，而实际上线的时候使用的是别的服务器。那么正式上线的代码就需要去一个个修改请求的URL。

这样的做法显然非常麻烦，而且还有可能出错。

proxy

那么解决的方案就是使用webpack-dev-server的proxy配置项。

{...,devServer: {open: true,hot: true,hotOnly: true,proxy: {'/react/api': 'http://www.dell-lee.com'}}
}

而之前使用axios请求所用的URL则可以把域名部分去掉写成/react/api/header.json。上面配置的含义就是当请求/react/api这个路径，就会自动代理到http://www.dell-lee.com/react/api。

现在又有一个新的问题，有些时候可能接口后端还未开发完成，仅提供了一个例如说写死数据的接口来临时使用。

例如之前例子中的header.json，后端未开发完成，于是提供了一个demo.json。

同样按照我们目前的配置，一旦后端将接口开发完成，我们需要切换接口，同样是麻烦和易出错。

那这个问题也能通过配置项来完成。

{...,devServer: {open: true,hot: true,hotOnly: true,proxy: {'/react/api': {target: 'http://www.dell-lee.com',pathRewrite: {'header.json': 'demo.json'}}}}
}

现在这个配置项相当于将header.json重写为demo.json。
于是就相当于请求了demo.json。当需要切换接口的时候，仅需要把'header.json': 'demo.json'这行注释掉或删除掉即可。

官方文档里还提供了几个比较常用的配置：

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";}}}
}

bypass配置项，顾名思义就是“绕过”。这个字段对应一个函数，函数接受3个参数，分别是请求对象、相应对象、代理选项。

那么这个例子就是绕过所有的html资源的请求，直接返回/index.html。

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

proxy: {"/api": {target: "https://other-server.example.com",secure: false}
}

如果想要请求多个路径都代理到一个域名上，换句话说请求/react/api或者/vue/api都代理到http://www.dell-lee.comn可以这样设置：

proxy: [{context: ["/react/api", "/vue/api"],target: "http://www.dell-lee.com",
}]

webpack-dev-server的代理（proxy）相关推荐

webpack开发配置API代理proxy，解决跨域问题
1. 一个完整的webpack配置代理代码设置代理需要: 1.需要使用本地开发插件:webpack-dev-server. 2.webpack-dev-server 使用的是 http-proxy- ...
WEBPACK DEV SERVER
文/tsyeyuanfeng(简书作者) 原文链接:http://www.jianshu.com/p/941bfaf13be1# 著作权归作者所有,转载请联系作者获得授权,并标注"简书作者& ...
webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require('axios') co ...
Invalid options object. Dev Server has been initialized using an options object that does not match
Invalid options object. Dev Server has been initialized using an options object that does not match ...
Invalid options object. Dev Server has been initialized using an options object
启动webpack报错: [webpack-cli] Invalid options object. Dev Server has been initialized using an options ...
ValidationError: Invalid options object. Dev Server has been initialized using an options object th
ValidationError: Invalid options object. Dev Server has been initialized using an options object tha ...
linux下最简单多线程单文件socks5代理proxy服务器程序（仅一个c文件，带详细注解）
2020.9.11 网上看的都比较复杂,GITHUB找了一个多线程的相对简单的MicroSocks项目,花了几周时间(没办法,菜鸟一个)改了一下,改成单文件,测试OK. /* wxl_socks5_p ...
Webstorm中提示Cannot find module 'webpack.dev.conf.js'
问题描述: 在Webstorm中运行cordova项目时,提示: Cannot find module 'webpack.dev.conf.js' 先不要着急删掉node_modules,然后重新np ...
动态代理proxy与CGLib的区别
转载自动态代理proxy与CGLib的区别昨天被人问及动态代理与CGlib的区别,赶紧回顾一下: 什么是代理? 静态代理与动态代理静态代理实例 JDK动态代理实例 CGLib 简介 CGLib ...

webpack-dev-server的代理（proxy）

文章目录

引入

proxy

webpack-dev-server的代理（proxy）相关推荐

最新文章

热门文章