1. 前置说明：

  • React本身值关注于页面，并不包含发送ajax请求得代码；
  • 前端应用需要通过ajax请求于后台进行交互（json数据）；

  • react应用需要集成第三方得一些库， 或者自己进行封装。

    2. 常用的ajax请求库

  • jquery： 比较重， 需要另外引入，不建议使用；

  • axios: 轻量级， 建议使用
  1. 封装XmlHttpRequest对象的ajax
  2. promise风格
  3. 可以用在浏览器端和node服务器端

    3. 同源策略

    所谓同源：【指在同一个域】就是两个页面具有相同的协议（protocal）、主机（host）和端口号（port）, 当一个请求url的协议、域名、端口三者之间任意一个与当前页面的url不同，即为跨域。
    FeHelper

4. react脚手架配置代理

4.1 指配置一个代理

在package.json文件中， 添加

  1. "proxy": "http://localhost:5000"

说明：

  1. 优点：配置简单，前端请求资源时可以不加任何前缀。
  2. 缺点：不能配置多个代理。
  3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

    4.2 配置多个代理

  4. 第一步：创建代理配置文件
    1. 在src下创建配置文件：src/setupProxy.js
  5. 编写setupProxy.js配置具体代理规则： ```javascript const proxy = require(‘http-proxy-middleware’)

module.exports = function(app) { app.use( proxy(‘/api1’, { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: ‘http://localhost:5000‘, //配置转发目标地址(能返回数据的服务器地址) changeOrigin: true, //控制服务器接收到的请求头中host字段的值 / changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000 changeOrigin默认值为false，但我们一般将changeOrigin值设为true / pathRewrite: {‘^/api1’: ‘’} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置) }), proxy(‘/api2’, { target: ‘http://localhost:5001‘, changeOrigin: true, pathRewrite: {‘^/api2’: ‘’} }) ) } ``` 说明：
1. 有点： 可以配置多个代理， 可以灵活的控制请求是否走代理；
2. 缺点： 配置繁琐， 其阿奴但请求资源时必须加前缀；
连续结构赋值， 并且重命名：