react axios配置代理(proxy),如何解决本地开发时的跨域问题
更新时间：2023年07月04日 09:22:07 作者：好巧.
这篇文章主要介绍了react axios配置代理(proxy),如何解决本地开发时的跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
前言
本文基于
“react”: “^18.2.0”
1.暴露隐藏的webpack配置
react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来
yarn eject
会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?
输入 y 回车
成功之后 在项目根目录会出现一个 config 文件夹
2.配置代理Proxy
打开 config 文件夹下的 webpackDevServer.config.js 文件
搜索 proxy 找到配置项
参照如下格式，配置代理
proxy: {
'/api': {
target: 'http://localhost:9000', // 后台服务地址以及端口号
ws: true,
changeOrigin: true, //是否跨域
pathRewrite: { '^/api': '/' }
}
},
3.在项目中使用
/api + 后台接口地址
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
componentDidMount() {
axios.get('/api/logout')
.then(res => {
console.log(res);
})
}
}
export default App;4.接口请求示例
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在react面试中，面试官经常会问我们一些关于react的生命周期问题，今天特此分享本文给大家详细介绍下，感兴趣的朋友跟随小编一起看看吧2021-08-08
这篇文章主要介绍了react.js create-react-app中添加less支持的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了React antd tabs切换造成子组件重复刷新,需要的朋友可以参考下2021-04-04
这篇文章主要为大家介绍了react hooks UI与业务逻辑分离必要性技术方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要给大家介绍了关于antd 3.x Table组件如何快速实现虚拟列表的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用antd具有一定的参考学习价值,需要的朋友可以参考下2022-11-11
这篇文章主要为大家介绍了Modal.confirm是否违反了React模式分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
使用redux管理数据，由于Store独立于组件，使得数据管理独立于组件，解决了组件之间传递数据困难的问题，非常好用，今天重点给大家介绍使用react+redux实现计数器功能及遇到问题，感兴趣的朋友参考下吧2021-06-06
这篇文章主要为大家介绍了React中immutable的UI组件渲染性能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了react 父子组件之间通讯props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论