项目需求

• 项目中遇到请求跨域问题，我们一般需要项目中配置代理解决。
  项目用create-react-app2生成后
• 首先安装包 http-proxy-middleware

npm install http-proxy-middleware --save
# or
yarn add http-proxy-middleware

• 然后在src目录下创建 setupProxy.js 文件(一定要在src根目录里面)
  最后设置代理

// setupProxy.js(请求亲亲网和猫眼电影数据)
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/index.php', {  //`api`是需要转发的请求 
      target: 'http://qinqin.net',  // 这里是接口服务器地址
      changeOrigin: true,
    })
  )
  app.use(proxy('/ajax',{//猫眼电影数据
        target:'http://m.maoyan.com',
        changeOrigin:true
    }))
}

• 然后在需要数据的组件页面中获取并渲染数据(这里举例商品详情页获得数据)
• 安装axios转换请求数据和响应数据

//srcpagescategoryindex.js文件
import React, { Component } from 'react'
import './index.scss'
import Slider from './Slider'
import axios from 'axios'

export default class Category extends Component {
  constructor(props) {
    super(props)
    this.state = {
       data: [] 
    }
  }
  componentDidMount () {
    axios({
      url: '/index.php',
      params: {
        r: 'class/category',
        type: 1
      }
    }).then( res => {
      res.data.data.data.map( item => {
        item.title = item.name 
        return ;
      })
      this.setState({
        data: res.data.data.data
      })
    })
  }
  render() {
    return (
      <div className = "container">
          <Slider { ...this.state }/>
      </div>
    )
  }
}

• 最后在组件中渲染数据

//srcpagescategorySlider.js文件
import React from 'react'
import { Tabs, WhiteSpace } from 'antd-mobile';//第三方插件库
import Content from './Content'

export default class Slider extends React.Component {
  renderContent = tab => {
    return (
      <div style={{ height: '100%', overflow:'auto',backgroundColor: '#fff' }}>
         { tab.floors.map( (item,index) => <Content key = { index } { ...item } />)}
      </div>
  );
  }
  render() {
    const { data } = this.props 
    return (
       <Tabs 
         tabs={ data }
         renderTabBar={props => <Tabs.DefaultTabBar {...props} page={ 11 } />}
         tabBarPosition = "left"
         tabDirection = "vertical"
       >
         {this.renderContent}
       </Tabs> 
    );
  }
}

//srcpagescategoryContent.js文件
import React, { Component,Fragment } from 'react'
import { Link } from 'react-router-dom'

const Content = props => {
  const renderList = list => {
    return list.map( item =>  (
      <li key = { item.api_cid}>
        <Link 
          to = {{
            pathname: `/list/${ item.api_cid }`,
            search: `cid=${ item.api_cid }&a=1`
          }}
        >
          <img src = { item.img }/>
          <span> { item.name } </span>
        </Link>
      </li>
    ))
  }
  return (
    <Fragment>
      <div className = "floor">
        <h3 style = {{ margin: 0}}> { props.name } </h3>
        <ul>
          { renderList( props.list) }
        </ul>
      </div>
    </Fragment>
  )
}
export default Content

• 所有组件最终在App.js文件中引用

最后

以上就是发嗲帆布鞋为你收集整理的反向代理设置/axios请求数据项目需求的全部内容，希望文章能够帮你解决反向代理设置/axios请求数据项目需求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。