问题

如何在 React 中发送 Ajax 请求

常用的Ajax请求库

jQuery 比较重，不建议使用
axios 建议使用

axios 的三个优点

封装了 Ajax
promise 风格
可以在浏览器和node服务端中使用

服务端准备

node + express

Chrome插件：FeHelper，能自动整理 Json 数据

React 中 axios 的使用示例

跨域问题

跨域问题的原因

当发生跨域的时候，Ajax 是允许发送请求的，请求也能到达服务器，服务器也能把请求返回来（响应），但问题出在了我们的 Ajax 引擎上，它不接受这个响应。产生跨域问题的本质是 Ajax 引擎把响应拦住了。

这个问题的解决在 Ajax 的那篇文章里记录了两种解决方案，分别是 JSONP 和 CORS ，这里介绍一种新的方式

代理服务器 设置一个代理服务器当中间人，为什么中间人不会拦截服务器的响应呢？因为这个中间人它自身就是一个服务器，它没有 Ajax 引擎，同时它的端口为 3000 ，有效避免了跨域问题。

如何开启代理服务器

一

在package.json中添加 "proxy": "http://localhost:5000" ，将请求转发给它。但是，并非所有的请求都会转发给它，而是会先看看自己有没有这个，再去转发给代理服务器。

localhost:3000 指的是脚手架里的public文件夹

getStudentDate = () => {
    // 这里会先看自身有没有，没有的话才会去转发给代理服务器
    axios.get('http://localhost:3000/students').then(response => {
        console.log('成功了',response.data);
    }, error => {
        console.log('失败了',error);
    })
}

二

一操作有个严重的问题，只能配置一个代理服务器，也就是说我们只能固定向一个地方发送请求，这在实际中非常的不灵活。

我们需要一个做法让我们能配置很多个服务器

第一步 先在 scr 里面创建一个 setupProxy.js 的文件，在这里面设置代理，react 会自动去处理它。

// CJS 语法
const proxy = require('http-proxy-middleware')

module.exports = function(app){
    app.use(
        proxy.createProxyMiddleware('/api1', {
            // 遇到 /api1 该前缀就会触发该代理配置
            target: 'http://localhost:5000',   // 请求目标地址
            changeOrigin: true,  // 控制服务器收到的请求头中 Host 字段的值 表示请求的来源 
            pathRewrite: {'^/api1': ''}  // 重写请求路径
        }),
        proxy.createProxyMiddleware('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {'^/api2': ''}
        })
    )
}

第二步 对于请求函数，我们需要这样子去写，它会优先匹配前端资源，没有的话才去走代理。

getStudentDate = () => {
    axios.get('http://localhost:3000/api1/students').then(response => {
        console.log('成功了',response.data);
    }, error => {
        console.log('失败了',error);
    })
}

配置代理后遇到了个问题，react无法启动，显示无法访问，原因是 setupProxy 出了点问题，跟着这篇文章就解决了 React 代理 setupProxy 无法启动项目

React Ajax 脚手架配置代理

问题