如何使用webpackDevServer实现请求转发

keji.jpg

写在前面

在日常开发中，我们经常会遇到开发环境下跨域的问题，这时候，就需要我们用一个工具，将请求转发至对应的服务上，从而解决这个问题。在以前，我们可能会用到nginx这样的工具，做请求的代理转发，有了webpack后，我们可以通过devServer完成这一操作了，接下来我们将讲解一下，如何使用webpackDevServer实现请求转发

开始

我们使用一个react的webpack项目（之前文章讲解中自己搭建的一个简单demo），大家也可以使用自己的webpack项目，不限框架，这里我们重点在于devServer的请求转发。这里我用Axios发请求。我的代码如下

import React from 'react'
import ReactDom from 'react-dom'
import axios from 'axios'

class App extends React.PureComponent{

    componentDidMount () {
        axios.get('http://10.16.21.29:8080/...这里是你的接口地址').then(res => {
            console.log(res)
        })
    }

    render () {
        return (<div>Hello Webpack</div>)
    }
}

ReactDom.render(<App/>, document.getElementById('root'))

我们通过运行上面的代码，实现了一个请求的发送，也可以正确的在控制台打印出正确的结果。有人会发出疑问，为什么我没有发生跨域问题，因为我本地的接口的服务器对跨域做了处理，如果你的接口没有处理呢，那么你先暂时处理下，也可以不去处理，我们往下看。
通常情况下，我们的请求环境会有多个，有测试环境，开发环境等，如果我们在之类把域名写死的话，就会存在一些问题，所以，一般我们都会采用一种相对路径的形式，去掉前面的域名前缀 。
当你去掉前缀后，你会发现报这样的错

axioserr.png

我们的locahost:8080端口下并没有那个路径或者接口，于是我们就需要一种手段做一下请求的转发，将访问的对应路径，转发到有这个接口的对应服务器上。

devServer.proxy

webpack为我们提供了本地解决接口转发的方式，这就是devServer.proxy。我们参照Webapck官网，对我们的项目做一个代理转发的配置。

module.exports = {
     devServer: {
        contentBase: './dist',
        open: true,
        hot: true,
        proxy: {
            "/***/api(这里是你的接口包含的公共字段，用来匹配接口)": "http://www.***.com"（这是你的访问的服务器）
        }
    }
}

这时候，重启你的项目，就可以正常的访问了，devServer.proxy可以根据匹配规则，匹配到对应的接口，并将其转发到对应的
服务器上。

proxy.pathRewrite

有时候，我们会有这样的需求，后端的接口会有一些改动，或者在进度上有一些问题，他可能会把原本访问的'a.json'接口暂时让你去访问‘b.json’，这时候，如果你去改代码，那么等他a接口完成的时候，可能你还得再改回来，抛开工作量，这操作也是容易出错的，我们可以使用proxy.pathRewrite来解决这一痛点。

proxy: {
    "/react/api": {
        target: "http://www.dell-lee.com",
        pathRewrite: {
            'a.json': 'b.json'
        }
    }
}

其中，target还是我们之前的转发地址，pathRewrite则代表，我们访问'a.json'的时候，他会帮我们访问'b.json'，这样，你就不用全局的修改代码了，试一下吧
当你用network进行请求监控的时候，你会发现，我们请求的还是‘a.json’，但是这时候结果已经是'b.json'的结果了。我们可以根据自己的需求，去选择时候需要配置。
注意：我们的proxy是devServer的一个配置，也就是说，只有在本地开发环境下，我们才可以使用，等线上就不会使用了

当然了，proxy的配置还有很多哈，这里不做一一详细介绍了，我简单罗列一些相关配置的作用

其他配置

• secure,当我们要转发的网址是https时，我们要将其设为false
• bypass，我们可以通过改配置项，实现请求的拦截
• context，如果我们需要对多个路径进行转发，可以使用这个参数
• index，devServer默认是不支持我们对'/'根路径的转发的，但是如果你想要对根路径转发，那就把index设置为false就好了
• changeOrigin,有些网站为了方式爬虫爬取数据，对origin做了限制，那么我们想要去代理这样的网站，就需要将该值设为true

关于proxy的配置呢，我们这里就将这多，实际上，proxy是利用了一个http-proxy-middleware插件，我们可以从git上找到这个插件，其配置项还有很多，感兴趣的可以去学习一下。

写在最后

本篇，主要介绍了使用webpack devServer进行请求的转发，其配置项也是有很多，大家感兴趣的话，可以参考https://github.com/chimurai/http-proxy-middleware。