关于react.js:代理

11次阅读

共计 2160 个字符，预计需要花费 6 分钟才能阅读完成。

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

跨域并不是说无奈发送 ajax. 而是说发送的 axios 因为跨域无奈返回。ajax 引擎是容许你拜访的，然而它会拦挡你的申请。

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

是因为 ajax 引擎的存在，所以同源策略对其有效。而代理是通过申请转发的形式，所以 3000 5000 都能够。

办法 1

在 package.json 中追加如下配置值是须要拜访的服务器地址须要重启
```
      "proxy":"http://localhost:5000"
```
阐明：

1）长处：配置简略，前端申请资源时能够不加任何前缀。

2）毛病：不能配置多个代理。

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

4）留神在申请的时候你须要写本地端口也就是 3000 . localhost://3000 对应的就是本地的 public 文件夹

办法 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': ''}
       })
     )
   }

阐明：

长处：能够配置多个代理，能够灵便的管制申请是否走代理。
毛病：配置繁琐，前端申请资源时必须加前缀。

在 config.js 配置文件里设置

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

工具库: PubSubJS
下载: npm install pubsub-js –save
应用:

1) import PubSub from ‘pubsub-js’ // 引入

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

3) PubSub.publish(‘delete’, data) // 公布音讯
了解

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

2）实用于任意组件间通信

3）要在组件的 componentWillUnmount 中勾销订阅

文档

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

2）https://segmentfault.com/a/11…
特点

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

2）老版本浏览器可能不反对

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

正文完