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的connect示例详解
connect()是react-redux中的核心方法之一，它将react组件预redux中的Store真正连接在一起，这篇文章主要介绍了react-redux的connect详解,需要的朋友可以参考下
2023-01-01
浅谈React Component生命周期函数
React组件有哪些生命周期函数？类组件才有的生命周期函数，分为几个阶段：挂载，更新，卸载，错误处理，本文主要介绍了这个阶段，感兴趣的可以了解一下
2021-06-06
React 实现拖拽功能的示例代码
这篇文章主要介绍了React 实现拖拽功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Next.js搭建Monorepo组件库文档实现详解
这篇文章主要为大家介绍了Next.js搭建Monorepo组件库文档，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
react中context传值和生命周期详解
这篇文章主要介绍了react中context传值和生命周期,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
react 国际化的实现代码示例
这篇文章主要介绍了react 国际化的实现代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
VSCode配置react开发环境的步骤
本篇文章主要介绍了VSCode配置react开发环境的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
在create-react-app中使用css modules的示例代码
这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
React编程模型之Project Reactor实际应用实例
这篇文章主要介绍了React编程模型之Project Reactor实际应用实例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2025-05-05
React如何创建组件
本文我们将介绍 React中组件的类别，以及如何创建和使用组件。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06