【React】使用 http-proxy-middleware 解决跨域问题

最新推荐文章于 2025-11-07 00:52:10 发布

原创最新推荐文章于 2025-11-07 00:52:10 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在React应用中配置API代理，通过创建setupProxy.js文件并利用http-proxy-middleware库，将API请求从'/api'路径代理到'http://localhost:8000'，解决了跨域问题。测试显示，fetch请求能正确访问目标路径并返回数据。

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)
})