[JavaScript知识库]【React】使用 http-proxy-middleware 解决跨域问题

1. 安装 http-proxy-middleware

yarn add http-proxy-middleware 或 npm i http-proxy-middleware

2. 创建 setupProxy.js 文件

在 src 中新建一个名为 setupProxy.js 的文件

3. 编辑 setupProxy.js 文件

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){
    app.use(
        "/api",                                 // 代理路径
        createProxyMiddleware({
            target: "http://loaclhost:8000",    // 目标路径
            changeOrigin: true,
            pathRewrite:{
                '^/api': ''                     // 重写原路径
            }
        })
    )
}

4. 测试

// get http://loaclhost:8000/param=123
fetch("/api/param=123").then(function(res){
	return res.json()
}).then(function(data){
    console.log(data)
})