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中Redux原理,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下2022-11-11
最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下2024-01-01
ahooks useVirtualList 封装虚拟滚动列表
这篇文章主要为大家介绍了ahooks useVirtualList 封装虚拟滚动列表详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React事件处理和表单的绑定，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了useEffect中return函数的作用和执行时机,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了React组件三大属性之state,props,refs,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要为大家介绍了React中classnames库使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了Rect Intersection判断两个矩形是否相交的算法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本文主要介绍了React脚手架搭建的学习，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
最新评论