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)  })