webpack-dev-server的代理（proxy）

骑猪看日落 2024-04-18 12:58 55阅读 0赞

### 文章目录 ###

*  引入
 *  proxy

# 引入 #

先看一个例子：

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",
    }]