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实现单向数据流的方法
2023-04-04
React Hooks常用场景的使用(小结)
这篇文章主要介绍了React Hooks常用场景的使用，根据使用场景分别进行举例说明，帮助你认识理解并可以熟练运用 React Hooks 大部分特性，感兴趣的可以了解一下
2021-04-04
React配置Redux并结合本地存储设置token方式
这篇文章主要介绍了React配置Redux并结合本地存储设置token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
react项目使用redux初始化方式
这篇文章主要介绍了react项目使用redux初始化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
Create react app修改webapck配置导入文件alias
这篇文章主要为大家介绍了Create react app修改webapck配置导入文件alias,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12
教你快速搭建 React Native 开发环境
这篇文章主要介绍了搭建 React Native 开发环境的详细过程,本文通过图文指令给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
react中如何使用监听
在 React 中,您可以使用 addEventListener 函数来监听事件,本文通过实例代码给大家介绍react中如何使用监听,感兴趣的朋友跟随小编一起看看吧
2023-10-10
react中定义变量并使用方式
这篇文章主要介绍了react中定义变量并使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
React Hook 四种组件优化总结
这篇文章主要介绍了React Hook四种组件优化总结，文章围绕主题展开详细的内容介绍，具有一定的参考价孩子，需要的朋友可以参考一下
2022-07-07
React Native性能优化指南及问题小结
本文将介绍在React Native开发中常见的性能优化问题和解决方案,包括ScrollView内无法滑动、热更新导致的文件引用问题、高度获取、强制横屏UI适配、低版本RN适配iOS14、缓存清理、navigation参数取值等,感兴趣的朋友一起看看吧
2024-01-01