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

相关文章
|
1天前
create-react-app配置环境变量
create-react-app配置环境变量
82 0
|
1天前
|
前端开发 JavaScript 开发者
React 项目用过什么脚手架(本题是开放性题目)
React 项目用过什么脚手架(本题是开放性题目)
13 0
|
1天前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
35 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
1天前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
33 0
|
1天前
axios封装和配置
axios封装和配置
20 0
|
1天前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
34 2
|
1天前
Vue3 配置代理和使用全局axios请求数据
Vue3 配置代理和使用全局axios请求数据
96 1
|
1天前
【Axios】配置默认值及拦截器代码逐行详解
【Axios】配置默认值及拦截器代码逐行详解
43 0
|
1天前
|
缓存 前端开发 JavaScript
第二十八章 React脚手架配置代理
第二十八章 React脚手架配置代理
|
1天前
|
前端开发 测试技术 程序员
第十五章 react脚手架
第十五章 react脚手架