react中代理的使用

Posted 2021-08-11 老张在线敲代码

首先安装俩个依赖

yarn add axios
yarn add http-proxy-middleware

然后在src下创建一个文件名为setupProxy.js
具体代码如下

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
      '/home',createProxyMiddleware({
        target: 'https://home-api.pinduoduo.com',
        //使用接口地址
        changeOrigin: true,
      })
    );
    app.use(
      '/api',createProxyMiddleware({
        target: 'http://api.bdplus.cn/',
        //使用域名
        changeOrigin: true,
      })
    );
};

在页面中使用该接口
下面是全部代码，拿到接口数据后循环渲染到页面中

import React, { Component } from "react";
import axios from "axios";
class State extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }
  getPdd() {
    const _this = this;
    axios
      .get("/home/mediareports?", {
        params: {
          page_number: 1,
          page_size: 20,
        },
      })
      .then((res) => {
        console.log(res);
        _this.setState({
          list: res.data.data,
        });
      });
  }

  componentDidMount() {
    this.getPdd();
  }
  lists() {
    const { list } = this.state;
    return list.map((item, index) => {
      return <li key={index}>{item.main_title}</li>;
    });
  }
  render() {
    const { list } = this.state;
    return <div>{list.length > 0 && this.lists()}</div>;
  }
}

export default State;