*请怀着一颗感恩的心,my good time。
一、当前脚手架项目下安装
npm i http-proxy-middleware --save -dev
二、创建文件 ./src/setupProxy.js
解释:在src文件夹 下面创建 setupProxy.js 文件
三、编辑 setupProxy.js 文件文件内容
const { createProxyMiddleware } = require('http-proxy-middleware')
// react 跨域 (反向代理)
module.exports = function (app) {
// /api 可以更改为自己想要的名字 和下边的^/api要一样
app.use(createProxyMiddleware('/api', {
// 请求基础地址
target: 'http://localhost:19998',
secure: false,
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}));
}
四、重新启动项目即可
*感谢您的收看
本文详细介绍了如何在React项目中通过创建setupProxy.js文件并使用http-proxy-middleware来设置反向代理,解决API调用的跨域问题。通过在src目录下创建setupProxy.js,配置代理中间件,将'/api'路径的请求转发到'http://localhost:19998',实现本地开发环境的跨域请求。按照步骤操作后,重新启动项目即可生效。
2681





