React代理配置总结

最新推荐文章于 2024-12-27 14:42:33 发布

原创最新推荐文章于 2024-12-27 14:42:33 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

React 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何通过package.json的proxy属性和http-proxy-middleware模块，轻松配置开发环境和生产环境的API代理。步骤包括设置proxy属性、安装中间件和创建setupProxy.js文件来动态路由请求。

一. 直接在package.json中设置proxy属性

"proxy": "http://172.16.136.249:8080"

二. 安装http-proxy-middleware

npm install http-proxy-middleware --save
yarn add http-proxy-middleware --save

三. 在src目录下创建 setupProxy.js 文件

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(createProxyMiddleware(process.env.NODE_ENV === 'production' ? '/szyl/prod-api':'/dev-api',
        {
            target: 'https://xxx.cn/admin/prod-api',
            // target: 'http://xxx/admin/dev-api', 
            pathRewrite: {
                ['^' + process.env.NODE_ENV === 'production' ? '/szyl/prod-api':'/dev-api'] : '',
            },
            changeOrigin: true
        }
    ));
};