React中使用http-proxy-middleware跨域

本文介绍在React项目中如何使用http-proxy-middleware解决跨域问题,适用于create-react-app2.0及更高版本。通过在src目录下创建setupProxy.js文件,并配置代理规则,实现本地开发环境下的跨域请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React中使用http-proxy-middleware跨域

基于create-react-app 和axios

在create-react-app 2.0 之前,可以通过在package中添加proxy 来实现,如下
package,.json

"proxy": "http://0.0.2.89:300"

2.0之后官方推荐使用http-proxy-middleware

具体用法如下
在src路径下新建setupProxy.js
注意文件名必须是这个setupProxy.js 否则跨域失败

// setupProxy.js
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        proxy('/commonredirect', {  //`commonredirect`是需要转发的请求
            target: 'http://oil.server.zh8848.com/OilWxManage.aspx/',  // 这里是接口服务器地址
            changeOrigin: true,
            secure: false,
            pathRewrite: {
                "^/commonredirect": "/"
            },
        })
    )
};

文件名不能叫其他的原因:前端没有node服务器,是通过webpack的devServer跑起来的,在webpack.config.json中

tsconfig: paths.appTsConfig,
          reportFiles: [
            '**',
            '!**/__tests__/**',
            '!**/?(*.)(spec|test).*',
            '!**/src/setupProxy.*', //这里
            '!**/src/setupTests.*',
          ],
          silent: true,

所以不需要额外再引入一次,新建这样的文件夹即可跨域成功

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值