likes
comments
collection
share

代理

作者站长头像
站长
· 阅读数 22
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- 制定网站的偏爱图标  %PUBLIC_URL% 是react中的关键字 他代表public这个文件夹所在路径 优势在路由-->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口 用于做移动端的网页适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 配置浏览器地址栏页签的背景色[但是只有安卓系统的手机适用这个属性]兼容性不好 -->
    <meta name="theme-color" content="red" />
    <!-- 网站的描述信息 -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 手机存在把网页添加至主屏幕的功能 这是指的是添加到主屏幕后的图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
       应用加壳【可用于简单的小应用】 配置文件 manifest.json
       比如讲js套一个安卓的壳转化为apk 比如chrome切换为手机版 本质跟手机上的还是由区别的 这里本质还是一个网页
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. 对于加壳而言, 机安装应用的时候的一些配置信息 比如图标 应用名称 访问权限等 
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <!-- 浏览器不支持js运行的时候会弹出的 Chrome中可以在网站设置中关闭js -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- 容器 页面组件-->
    <div id="root"></div>
  </body>
</html>

https://www.robotstxt.org/rob...

爬虫规则文件 爬虫爬取页面的时候可以设置那些可以爬

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