react中跨域http-proxy-middleware的使用

React跨域请求实战

最新推荐文章于 2025-11-07 00:52:10 发布

原创最新推荐文章于 2025-11-07 00:52:10 发布 · 921 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #proxy

本文介绍如何在React项目中通过http-proxy-middleware插件解决跨域问题。文章详细讲解了安装配置过程，并提供了示例代码展示如何使用get方法从'/api/users'路径获取数据并更新组件状态。

react的数据跨域请求

因为react没有像vue一样提供内置的代理，所以需要自己手动安装http-proxy-middleware插件，

npm i -D http-proxy-middleware

配置代理

const {createProxyMiddleware: proxy} = require('http-proxy-middleware')

module.exports = app => {
  app.use('/api', proxy({
    target: 'http://localhost',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }))
}

import React, { Component } from 'react';
import { get } from './http'

class App extends Component {
  state = {
    area: ''
  }

  async componentDidMount() {
    const uri = '/api/users'
    let { data } = await get(uri)
    console.log(data);
    this.setState(state => ({
      area: data.area
    }))
  }

  render() {
    return (
      <div>
        <h3>{this.state.area ? this.state.area : '玩命加载中...'}</h3>
      </div>
    );
  }
}

export default App;