React学习记录三：配置代理

一、package.json中配置

在package.json文件中加上一行

"proxy":"https://localhost:3000"

二、setupProxy.js文件中配置

在 src 文件夹下新建一个文件，名为 setupProxy.js 。名字不能变

const {createProxyMiddleware} = require('http-proxy-middleware')
// 配制代理
module.exports = function(app){
    app.use(
        createProxyMiddleware('/api1',{ // 遇到 /api1 前缀的请求 ，就会触发该代理配置
            target:'http://localhost:3000', // 请求转发给 指定地址
            changeOrigin:true, // 控制服务器收到的响应头中Host字段的值
            pathRewrite:{ // 将^ /api1 替换成 ''
                "^/api1":''
            }
        }),
        createProxyMiddleware('/githubApi',{
            target:'https://api.github.com',
            changeOrigin:true,
            pathRewrite:{
                "^/githubApi":''
            }
        })        
    )
}

在发送请求时，如请求接口是 /api1/search 。会自动转为 http://localhost:3000/search