React-22:React脚手架配置axios代理

简介: React-22:React脚手架配置axios代理

1:给项目安装axios

npm install axios
复制代码

2:导入axios工具包

import axios from 'axios';
复制代码

3:给React脚手架添加中间代理实现跨域(方法一)

  • 在项目的package.json文件中添加下面的一句话

image.png

将请求修改为React脚手架对应的端口

image.png

  • 注意事项:并不是配置了代理,所有的请求都会通过代理,而是本地端口没有的请求才会询问代理端口。

4:给React脚手架实现跨域请求(方法二)

  • 配置多个代理
  1. 在src文件中添加setupProxy.js文件
  2. setupProxy.js中写的是common.js语法
  3. setupProxy.js中的文件内容
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
        proxy('/api1',{
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: {'^/api1':''}
        }),
        proxy('/api2',{
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {'^/api2':''}
        })
    )
}
作者:Always_positive
链接:https://juejin.cn/post/6948663670792683551
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

修改axios请求路径

image.png

相关文章
create-react-app配置环境变量
create-react-app配置环境变量
240 0
|
6月前
|
前端开发
如何在React Router中进行嵌套路由配置?
如何在React Router中进行嵌套路由配置?
333 57
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
420 2
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
608 2
|
移动开发 前端开发 安全
React Native环境搭建及配置问题
React Native环境搭建及配置问题
296 2
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
908 1
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
786 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
368 2