react配置代理

简介: react配置代理
在 package.json 中配置全局代理,但是只能有一个代理
在src中新建一个 setupProxy.js 文件,脚手架会自动识别并代理,可以配置多个代理。

一、在package.json中配置

"proxy": "需要代理的域名",

二、在 setupProxy.js(src目录下) 中配置

//api1是需页转发的请(所有带有/api1前温的请求部会转发给5000) target :'http://localhost:5000',
 //配置转发目标地址(返回款据的职务器地址)
 //change0rigin: true 。控制服务器接收到的谓求头中 host 字段的值
 //changeorigin 设置为 true 时,服务器收到的请求头中的 host 为: localhost :5000 
 //changeorigin 设置为 false 时,服务器收到的请求头中的 host 为: localhost :3000 
 //changeorigin 默认他为 false ,但我们一般将 changeorigin 值设为 true 
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api1', {// 使用 /api 前缀代理配置
      target: '需要代理的域名',// 跨域地址
      changeOrigin: true,//控制服务器收到的请求头中host的值
      pathRewrite: {
        '^/api1': ''
      }
    }),
    createProxyMiddleware('/ap2', {// 使用 /api 前缀代理配置
      target: '需要代理的域名',// 跨域地址
      changeOrigin: true,//控制服务器收到的请求头中host的值
      pathRewrite: {
        '^/api2': ''
      }
    }),
  )
}
相关文章
|
7月前
create-react-app配置环境变量
create-react-app配置环境变量
163 0
|
3月前
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
138 2
|
4月前
|
存储 监控 前端开发
|
4月前
|
移动开发 前端开发 安全
React Native环境搭建及配置问题
React Native环境搭建及配置问题
95 2
|
5月前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
316 1
|
7月前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
449 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
7月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
131 2
|
7月前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
240 0
|
7月前
|
存储 资源调度 前端开发
【React | 完整项目创建流程】能看到这么详细的React配置流程,就偷着乐吧!
【React | 完整项目创建流程】能看到这么详细的React配置流程,就偷着乐吧!
221 1
|
7月前
|
缓存 前端开发 JavaScript
第二十八章 React脚手架配置代理
第二十八章 React脚手架配置代理