react设置代理

1.创建一个setupProxy.js文件(文件名不能改)

2.在文件中写入一下内容

复制代码
// 配置代理---在新版本中将createProxyMiddleware需要解析出来
const {createProxyMiddleware } =require('http-proxy-middleware')

module.exports=function(app){
    app.use(
        // 第一个代理  遇见api1前缀的请求,就会触发该代理配置
        createProxyMiddleware ('/api1',{
            // 请求转发给谁
            target:'http://localhost:3000',
            changeOrigin:true,//控制服务器收到的请求头中HOST字段的值
            // 将api1变为空
            pathRewrite:{'^api1':''}//重写请求路径
        }),
        // 第二个代理
        createProxyMiddleware ('/api2',{
            target:'http://localhost:3001',
            changeOrigin:true,
            // 将api1变为空
            pathRewrite:{'^api2':''}
        }),
    )
}

3.使用

使用的时候很简单了

import axios from 'axios'

axios.get('/api1/search/user').then((res)=>{

}).catch((err)=>{

console.log(err)

})

相关推荐
顾安r32 分钟前
11.8 脚本网页 推箱子
linux·前端·javascript·flask
玖釉-2 小时前
用 Vue + DeepSeek 打造一个智能聊天网站(完整前后端项目开源)
前端·javascript·vue.js
devincob8 小时前
js原生、vue导出、react导出、axios ( post请求方式)跨平台导出下载四种方式的demo
javascript·vue.js·react.js
编程社区管理员8 小时前
React 发送短信验证码和验证码校验功能组件
前端·javascript·react.js
葡萄城技术团队8 小时前
迎接下一代 React 框架:Next.js 16 核心能力解读
javascript·spring·react.js
全马必破三8 小时前
React“组件即函数”
前端·javascript·react.js
三思而后行,慎承诺8 小时前
React 底层原理
前端·react.js·前端框架
座山雕~8 小时前
html 和css基础常用的标签和样式
前端·css·html
灰小猿9 小时前
Spring前后端分离项目时间格式转换问题全局配置解决
java·前端·后端·spring·spring cloud
im_AMBER10 小时前
React 16
前端·笔记·学习·react.js·前端框架