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':''}//去除请求前缀,保证交给后台服务器的事正常请求地址(必须配置)
        })
    )
}

说明:

  • 优点:可以配置多个代理,可以灵活的控制请求是否走代理
  • 缺点 : 配置繁琐 ,前端请求资源时必须加前缀
相关推荐
gnip2 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫3 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel4 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼4 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手8 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法8 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku8 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode8 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu8 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu8 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript