webpack高级概念，使用 WebpackDevServer 实现请求转发一 （系列十四)

当我们工作本地开发某一个需求的时候，需要将这块需求的请求地址转发到某个后端同事的本地服务器或某个服务器上，就需要用到代理。然后其他页面的请求都走测试环境的请求。那么我们该怎样拦截某个请求，并将其转发到我们想要转发的接口上呢？只有开发环境需要代理，

这个时候就需要用到 webpack-dev-server

主要看 devServer 配置：

// webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist',
        open: true,
　　　　　port: 8080,　
        hot: true
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ]
}

// package.json

scripts: {
  "server": "webpack-dev-server"
}

 

// index.js

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';

class App extends Component {

    componentDidMount() {
        // 真实接口:https://www.dell-lee.com/react/api/header.json
        // axios.get('https://www.dell-lee.com/react/api/header.json')
        //     .then((res) => {
        //         console.log(res);
        //     })

            // 真实接口不要写绝对路径，如果接口路径有变动，还要到每个组件修改，麻烦
            // 写相对路径，需要将前置路径放到proxy代理
            axios.get('/react/api/header.json')
            .then((res) => {
                console.log(res);
            })

    }

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

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

 

// package.json 

scripts: { "server": "webpack-dev-server" }

执行 npm run server 命令，浏览器会自动打开页面。

浏览器提示 接口 404 (Not Found) ,表示该接口不存在。因为我们此时会跨域，所以会提示找不到该接口。为了解决这个问题，我们就需要设置代理，转发域名

配置 webpack.config.js

这里我只展示 devServer 代码

// webpack.config.js

    devServer: {
        
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true,
        proxy: {
            '/react/api': {
                target: 'https://www.dell-lee.com',
　　　　　　　　　　//代理https协议，不是则该属性注释掉
                secure: false,
　　　　　　　　　　//可选，重写路径，将demo.json路径替换掉header.json
                pathRewrite: {
                    'header.json': 'demo.json'
                },
                changeOrigin: true,
            
            }
        }
    },

配置 devServer 的 proxy 字段的参数，将请求 /react/api开头的请求都转发到 http://localhost:8888 , 那么路径就是https://www.dell-lee.com/react/api/header.json

注意点，如果https://www.dell-lee.com/react/api/header.json这个接口后台还在修改，他把所有的假数据放在https://www.dell-lee.com/react/api/demo.json这个接口

那么我们组件中还是可以写/react/api/header.json相对路径请求，只需要在prxory中选择pathRewrite这个属性，他将demo.json替换掉header.json,

只要https://www.dell-lee.com/react/api/header.json这个接口处理好了，把pathRewrite这个属性注释掉即可

通过这个方法可以提到的本地开发的时候，前端解决接口跨域的问题，可以顺利拿到接口数据

当你要代理到某个https的接口上，就需要设置 secure: false

// webpack.config.js

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

 

其他配置

target: ''， // 代理的目标地址
secure: false, // 请求https的需要设置
changeOrigin: true,  // 跨域的时候需要设置
headers: {
  host: 'http://www.baidu.com', //修改请求域名
  cookie: ''
}
...

 

其他关于 devServer 的配置详见 devServer