webpack实战——proxy配置(四)

发送ajax请求
安装:

npm install axios --save-dev

src/index.js

// 安装: npm i react react-dom --save
//react:  https://babeljs.io/docs/en/babel-preset-react

//remove the `import '@babel/polyfill'` call or use `useBuiltIns: 'entry'` instead
// import "@babel/polyfill"
import React, {Component} from 'react'
import ReactDom from 'react-dom'
import axios from 'axios'

class App extends Component{
    componentDidMount() {
        axios.get('/react/header.json')
        .then((res) => {
            console.log(res)
        })
    }
    render() {
        return <div>hello world</div>
    }
}

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

devServer.proxy

https://www.webpackjs.com/configuration/dev-server/#devserver-proxy
注: proxy配置项只在devServer环境生效,也就是在开发环境下使用
webpack.config.js 配置proxy做代理转发

devServer: {
        contentBase: './dist',  //在哪个目录下启动服务器
        open: true,
        port: 8080,
        hot: true, //热更新
        hotOnly: true,
        proxy: {
            '/react/api': 'http://www.dell-lee.com' //当请求/react/api 都代理转发到
        }
    },

header.json的数据接口还没写好, 先请求demo.json接口的数据,可以添加pathRewrite配置项:

devServer: {
        contentBase: './dist',  //在哪个目录下启动服务器
        open: true,
        port: 8080,
        hot: true, //热更新
        hotOnly: true,
        proxy: {
            '/react/api': {
                target: 'http://www.dell-lee.com',
                pathRewrite: {
                    'header.json': 'demo.json' //实际是去请求demo.json的数据
                }
            } 
        }
    },

如果请求的是https,添加secure配置项:

devServer: {
        contentBase: './dist',  //在哪个目录下启动服务器
        open: true,
        port: 8080,
        hot: true, //热更新
        hotOnly: true,
        proxy: {
            '/react/api': 'http://www.dell-lee.com' //当请求/react/api 都代理转发到
        },
        proxy: {
            '/react/api': {
                target: 'https://www.dell-lee.com',
                secure: false,
                pathRewrite: {
                    'header.json': 'demo.json' //实际是去请求demo.json的数据
                }
            } 
        }
    },

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。

在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。

例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：

proxy: {
            '/react/api': {
                target: 'https://www.dell-lee.com',
                secure: false,
                bypass: function(req, res, proxyOptions) {
                    if (req.headers.accept.indexOf("html") !== -1) {
                      console.log("Skipping proxy for browser request.");
                      return "/index.html";
                    }
                  },
                pathRewrite: {
                    'header.json': 'demo.json' //实际是去请求demo.json的数据
                }
            } 
        }