React脚手架配置代理总结

react脚手架配置代理总结

方法一

在package.json中追加如下配置

json 复制代码
"proxy": "url地址"

说明:

  • 优点:配置简单,前端请求资源时可以不加任何前缀
  • 缺点:不能配置多个代理
  • 工作方式:上述方式配置代理,当 请求了3000(本地端口)不存在的资源时,那么噶请求会转发给5000(服务器端口)(优先匹配前端资源)

方法二

1、第一步:创建代理配置文件

复制代码
在src下啊创建配置文件:src/setupProxy.js

2、编写setupProxy.js配置具体代理规则

js 复制代码
const proxy = require('http-proxy-middleware')

moudle.exports = function(app){
    app.use(
    	proxy('/api1',{//api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
            target: 'http://localhost:5000',// 配置转发目标地址(能返回数据的服务器地址)
            changeOrigin: true,//控制服务器接收的请求头重Host字段的值
            /*
            	changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
            	changeOrigin设置为false时, 服务器收到的请求头中的host为:localhost:3000
            	changeOrigin默认值为false,但我们一般将changeOrigin的值设为true
            */
            pathRewrite : {'/^api1':''}//去除请求前缀,保证交给后台服务器的事正常请求地址(必须配置)
        })
    )
}

说明:

  • 优点:可以配置多个代理,可以灵活的控制请求是否走代理
  • 缺点 : 配置繁琐 ,前端请求资源时必须加前缀
相关推荐
MiyueFE21 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子25 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟2 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计