react项目代理配置

简介: react项目代理配置

1.在src文件下创建setupProxy.js,切记必须是这文件名,否则不会被识别

2.直接把代码v上去,const proxy = require("http-proxy-middleware");一定要先引入一下,这是react脚手架已经安装上的,直接引入就行

const proxy = require("http-proxy-middleware"); //引入http-proxy-middleware,react脚手架已经安装
module.exports = function (app) {
  app.use(
    proxy.createProxyMiddleware("/webapi", {
      //遇见/api1前缀的请求,就会触发该代理配置
      target: "https:....../webapi", //请求转发给谁
      changeOrigin: true, //控制服务器收到的请求头中Host的值
      pathRewrite: { "^/webapi": "" }, //重写请求路径,下面有示例解释
    })
  );
};

3.接口请求:webapi/......

相关文章
|
8月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
436 2
|
前端开发
如何在React Router中进行嵌套路由配置?
如何在React Router中进行嵌套路由配置?
675 57
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
960 2
|
移动开发 前端开发 安全
React Native环境搭建及配置问题
React Native环境搭建及配置问题
444 2
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
1583 1
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
995 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
780 0
|
7月前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南