React中使用http-proxy-middleware跨域

Markov Zheng

于 2019-12-18 14:05:15 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：网络学习日志 React 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/marko_zheng/article/details/103596654

网络学习日志同时被 2 个专栏收录

111 篇文章

订阅专栏

React

7 篇文章

订阅专栏

本文介绍在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,