（一）在脚手架中使用axios

一、在脚手架中使用 axios

1. 安装 axios

二、同源策略跨域问题

在请求数据的过程中，可能回出现请求跨域的问题，导致请求失败的情况，出现这种情况就是被同源策略限制了，要解决这类问题需要配置代理。

class App extends Component {
  getStudentData = () => {
    axios.get('http://q2.qlogo.cn/headimg_dl?dst_uin=2966211270&spec=100').then(
      response => {
        console.log('ZSW-成功了', response);
      },
      error => {
        console.log('ZSW-失败了', error);
      }
    )
  }

  render() {
    return (
      <div>
        <button onClick={this.getStudentData}>点击获取qq头像</button>
      </div>
    )
  }
}

没有配置代理请求别人的服务器出现跨域问题

三、 react 配置请求代理,解决跨域问题

三、解析 proxy 各项参数

// '/api1' 遇见/api1前缀的请求,就会触发该代理配置
proxy.createProxyMiddleware('/api1', {
            // 需要代理的服务器和端口号
            target: 'http://localhost:xxxx',
            // 控制服务器收到的请求头种host字段的值
            // 如果为 true 的时候,服务器所接收到的请求头是代理过后的请求头(欺骗服务器)
            // 如果为 false 的时候,服务器所接收到的就是原来的请求头
            changeOrigin: true,
            // 重写请求路径发送到服务器的路径需要把他替换掉,不然服务器将找不到这个路径
            pathRewrite: {'^/api1': ''}
        })