代理

6.2.3 react脚手架配置代理总结

​ 为什么需要代理，是因为跨域了。 本地的代码运行在3000. 你请求的是5000端口的接口。

跨域并不是说无法发送ajax. 而是说发送的axios因为跨域无法返回。ajax引擎是允许你访问的，但是它会拦截你的请求。

代理就是中间人，运行在3000端口的一个微型服务器。因为这里并不会跨域。代理是没有ajax引擎，要知道产生跨域的问题，

是因为ajax引擎的存在，所以同源策略对其无效。而代理是通过请求转发的方式，所以3000 5000都可以。

1. 方法1

   ​ 在package.json中追加如下配置 值是需要访问的服务器地址 需要重启

         "proxy":"http://localhost:5000"

   ​ 说明：

   ​ 1）优点：配置简单，前端请求资源时可以不加任何前缀。

   ​ 2）缺点：不能配置多个代理。

   ​ 3）工作方式：上述方式配置代理，本地有的资源不会请求5000.当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

   ​ 4）注意在请求的时候你需要写本地端口也就是3000 . localhost://3000 对应的就是本地的public文件夹

2. 方法2：

   ​ 1)第一步：创建代理配置文件

   ​ 在src下创建配置文件：src/setupProxy.js 名字是固定的，这个文件是commonjs语法。react脚手架找到这个配置文件，将其加入webpak的配置。webpack是用node 'http-proxy-middleware在react已经下载了

   ​ 2) 编写setupProxy.js配置具体代理规则：

      const proxy = require('http-proxy-middleware')
      
      module.exports = function(app) {
        app.use(
          proxy('/api1', {  //   api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
            target: 'http://localhost:5000', // 配置转发目标地址(能返回数据的服务器地址)
            changeOrigin: true, //   默认是false 控制服务器接收到的请求头中host字段的值
            /*
                changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
                changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
                changeOrigin默认值为false，但我们一般将changeOrigin值设为true
            */
            pathRewrite: {'^/api1': ''} //  去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置) url中不应该有api1 需要替换为空
          }),
          proxy('/api2', { 
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {'^/api2': ''}
          })
        )
      }

   ​ 说明：

   1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
   2. 缺点：配置繁琐，前端请求资源时必须加前缀。

   umi使用proxy代理解决跨域

   在config.js配置文件里设置

   proxy: {
     "/ci": { // 标识需要进行转换的请求的url
      "target": "http://example.com", // 服务端域名
      "changeOrigin": true, // 允许域名进行转换
      "pathRewrite": { "^/ci": ''}  // 将请求url里的ci去掉
     }

6.2.4 消息订阅-发布机制

1. 工具库: PubSubJS
2. 下载: npm install pubsub-js --save

3. 使用:

   ​ 1) import PubSub from 'pubsub-js' //引入

   ​ 2) PubSub.subscribe('delete', function(data){ }); //订阅

   ​ 3) PubSub.publish('delete', data) //发布消息

4. 理解

   ​ 1）先订阅，再发布（理解：有一种隔空对话的感觉）

   ​ 2）适用于任意组件间通信

​ 3）要在组件的componentWillUnmount中取消订阅

6.2.5 扩展：Fetch(关注分离思想)

1. 文档

   1） https://github.github.io/fetch/

   2） https://segmentfault.com/a/11...

2. 特点

   1）fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求（axios和jQuery都是对XmlHttpRequset的封装）

   2）老版本浏览器可能不支持

3. 相关API

   1）GET请求

   fetch(url).then(function(response) {
       return response.json()
     }).then(function(data) {
       console.log(data)
     }).catch(function(e) {
       console.log(e)
     });
   

   2）POST请求

   fetch(url, {
       method: "POST",
       body: JSON.stringify(data),
     }).then(function(data) {
       console.log(data)
     }).catch(function(e) {
       console.log(e)
     })