React

代理请求

反向代理

代码示例:

// src/test/Test04.jsx

import React, {Component} from 'react';
import axios from "axios";

export default class Test04 extends Component {
    componentDidMount() {
        axios.get('/api/test').then((res) => {
            console.log(res.data)
        }).catch(err => console.log(err))
    }

    render() {
        return (
            <div>
                Test04
            </div>
        );
    }
}
// src/setupProxy.js

// 每次修改完此文件必须重启项目,否则404
const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        '/api',  // 凡是本地以此开头的路径,都会被代理
        createProxyMiddleware({
            target: '',  // 请求的目标域名或ip(支持自定义端口)
            changeOrigin: true,  // 是否改变请求头中的host
        })
    )
}