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

说明:

  • 优点:可以配置多个代理,可以灵活的控制请求是否走代理
  • 缺点 : 配置繁琐 ,前端请求资源时必须加前缀
相关推荐
Ocean☾几秒前
前端基础-html-注册界面
前端·算法·html
Rattenking1 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu3 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym8 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫9 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫13 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat14 分钟前
前端性能优化2
前端
一ge科研小菜鸡36 分钟前
React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)
前端框架
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app