react配置代理的3中方法
创始人
2024-11-18 20:05:08

1.使用create-react-app的代理配置

   可以在项目根目录下的package.json文件中添加proxy字段来配置代理:

{    ...    "proxy": "http://localhost:5000" } //注意:比如当前端口是3000,先在当前端口3000中找对应路径内容,找不到就去5000中

2.使用http-proxy-middleware库

  create-react-app中内置http-proxy-middleware,只需要在src目录下新建setupProxy.js

//setupProxy.js const proxy = require('http-proxy-middleware') //这里用require()引入,是因为这里用commonjs规范 module.exports = function (app) {     app.use(proxy('/api', {         target: 'http://localhost:5000',         changeOrigin: true,         pathRewrite: {             '^/api': ''         }     })) }

3.craco 扩展webpack配置

  安装

npm i -D @craco/craco

   package.json里面做如下改动:

"scripts": { -  "start": "react-scripts start" +  "start": "craco start" -  "build": "react-scripts build" +  "build": "craco build" -  "test": "react-scripts test" +  "test": "craco test" }

根目录建文件craco.config.js

module.exports={     //...     // ...     devServer: {         proxy: {             '/api': {                 target: 'http://localhost:5000',                 changeOrigin: true             }         }     } }

相关内容

热门资讯

刚刚,Claude最新功能泄露... 新智元报道 编辑:定慧 大卫 【新智元导读】2026年5月4日,testingcatalog在An...
高分辨大宽带集成光子光谱仪成功... 麦姆斯咨询获悉,近日,中国科学院南京天文光学技术研究所天文光子学团队在面向天文观测的高分辨大宽带集成...
性价比高又稳定的云手机哪个好?... 作为搬了4年砖、踩过无数云手机坑的老玩家,今天直接给你们唠唠性价比高又稳定的云手机选法,全是实战干货...
以灵石破局,万物云参编国内首部... 4月23日,由低碳智慧建筑产业技术创新战略联盟与北京清华同衡规划设计研究院有限公司主办、万物云作为协...
专访 | CLA成功反哺全球 ... 2026年,是奔驰诞生的140周年,也是奔驰进入中国内地市场的20周年。 140年间,从第一款汽车问...