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

相关文章
|
3月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
149 2
|
9月前
|
前端开发
如何在React Router中进行嵌套路由配置?
如何在React Router中进行嵌套路由配置?
480 57
|
前端开发
React | 修改React脚手架的默认端口号?
React | 修改React脚手架的默认端口号?
523 160
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
404 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
175 6
React技术栈-基于react脚手架编写评论管理案例
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
495 2
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
711 2
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
120 2