欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

分析分层模型、XHR、跨域

最编程 2024-04-26 11:42:38
...
语言 协议 环境 应用

互联网开发行业越来越成熟，越来越卷，潮水退去，只有那些能力牢固的开发才能在这个行业扎根。前端学习都逃不过这四个层面。万变不离其宗，基础牢固，才能学得轻松。环境的变化是很快的，还是应用也更新很快。

  • 语言：2015年发生的稍微大一点变更，其余基本不怎么变动。html、css、js.
  • 协议：基本不怎么变更，这是基础。 http2出来多少年了，但是我们一直还在用十几年的http 1.1版本。
  • 环境：浏览器，node，桌面端，小程序，app。
  • 应用：vue.js、react.js、webpack、rollup、bowserify、vite，第三方库，框架、工程化、构建工具

协议

分层的意义：复杂问题简单化，一层只干一件事，相互独立，只解决自己的问题。

五层网络分层模型：
  1. 应用层：如何包装我们的信息，解决消息格式问题。（HTTP、FTP、DNS、SMTP、POP3）
  2. 传输层：如何保证我们的消息可靠传递。（TCP、UDP）
  3. 网络层：如何在互联网中找到对方（IP协议：IPV4、IPV6、路由器，）
  4. 数据链路层：在子网络中如何正确找到对象（MAC、交换机）
  5. 物理层：上面给我的东西如何用电信号、光信号表示？ （光纤、双绞线、同轴电缆、集线器）
URL（Uniform Resource Locator）

例如：http://a.com:80/news/detail?id=1#t1
协议(schema)、域名(domain)、端口(port)、路径(path)、参数（query）、哈希(hash)

  • 统一资源定位符（URL）：从网络中那台计算机（domain）中的哪个程序（port）寻找哪个服务（path）,并切注明获取服务的细节(query)，以及要使用什么样的协议通信（schema）.
  • 当协议是 http ，端口为 80时候，端口默认省略
  • 当 协议是https，端口为444时候，端口可以省略不写
  • 协议、域名、路径是必须的，其他根据具体要求填写
HTTP (Hyper Text Transfer Protocol)

  • http使用了一种极简的通信方式：请求-响应，一个请求，必定只能对应一个响应。，有请求才有响应。 造成的问题？ =》请求无状态


    image.png

  • 请求行

  • 请求头

  • 请求体

服务器的行为受什么影响？ 主要是响应头中的 content-type。 解析html，下载..

AJAX

浏览器本身就具备网络通信能力，但是在早期，浏览器并没有把这个功能开发给js。最早是微软在IE浏览器中把这一能力向js开放，在js代码可以在代码中实现发送请求，并不会刷新页面。 这项技术在2005年被正式命名为AJAX（Asynchronous Javascript And XML）。AJAX就是指在web应用中异步向服务器发送请求。
它的实现方式有两种：XMLHttpRequset 和 Fetch


截屏2023-03-05 上午11.46.50.png

Promise请求，我们拿到了 Response Header就意味着我们的 Promise 已经完成，但是响应也是需要时间的，就像我们的请求也是一样需要时间的。所以我们的解析也是一个异步的操作。

const xhr = new XMLHttpRequest()
// 监听请求完成
xhr.addEventListener('load', ()=> {
  const resp = JSON.parse(xhr.responseText).data
})
// 上监听传进度
xhr.upload.addEventListener('process', (e)=> {
  const precent = Math.floor((e.loaded/e.total) * 100%)
})
// 配置请求
xhr.open('post', url)
const formData = new FormData()
formData.append('avator', file)
// 发送请求
xhr.send(formData)

跨域问题 及 解决方案

  • 同源策略是浏览器的一套安全策略，当一个源的文档或者脚本，对另外一个源的资源进行通信的时，同源策略就会对这个通信做出不同程度的限制。
  • 简单来说就是：同源策略对同源资源 放行， 对异源资源限制，由此限制造成的开发问题，我们称之为 跨域（异源）问题。

源（origin）= 协议 + 域名 +端口，三者必须一模一样，否则就是不同源，url地址路径之前的部分。 简单来说就是浏览器跨域通信是可以访问到服务器信息的，但是浏览器接收到了信息，如果跨域了，我们JS拿不到服务器返回的信息，浏览器给我们前端JS屏蔽掉了.

跨域可能出现的三个场景：

  • 网络通信
    a元素的跳转；加载css，js，图片等；AJAX
  • JS API
    window.open、window.parent、iframe.contentWindow
  • 存储
    WebStorage、IndexDB

对于不同的跨域场景，以及每个场景中不同的跨域方式，同源策略都有不同的限制。

解决方案

CORS

cors （Cross-Origin Resource Sharing）是最正统的跨域解决方案，也是浏览器最推荐的解决方案。 这是一套规则，用于帮助浏览器判断是否校验通过。 需要修改服务器配置。
cors的基本理念：

  • 只要服务器明确表示允许，则校验通过
  • 服务器没有明确表示允许 或者明确表示拒绝，则校验不通过。

cors将请求分为两大类：简单请求、预检请求

简单请求

  • 请求方式
    GET、POST、HEAD 之一

  • 请求头字段满足CORS 安全规范，详见 W3C

    浏览器默认的自带的请求头都是安足安全规范的，只要开发者不改动或者新增头部，就不会打破此条

  • 请求头中 content-type 必须是以下几种中的之一：

    1. text/plain
    2. multipart/form-data
    3. application/x-www-form-urlencodeed
预检请求

浏览器预先发送一个 options请求

``` 请求
OPTIONS /api/user HTTP/1.1
Host: crossdoamin.com
...
origin: http://my.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: a, b, content-type

``` 响应
HTTP/1.1 200 OK
Date: Tue, 21 Apr 2020 09:03:35 GMT
...
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow--Methods: POST, GET
Access-Control-Allow-Headers: a, b, content-type
Access-Control-Max-Age: 86400  // 这里是预检请求时间，浏览器缓存起来，时间范围之内，不再重新预检
细节1-关于cookie

默认情况下，ajax的跨域请求并不会附带 cookie ,这样一来，某些需要权限的操作就无法进行，不过可以通过简单设置就可以实现附带 cookie

// xhr
const xhr = new XMLHttpRequest()
xhr.withCredentials = true
// fetch api
fetch('www.baidu.com',{
  credentials: 'include'
})

这样我们的跨域的ajax请求就是一个附带 cookie 身份凭证 的请求，无论是简单请求还是预检请求，都会在请求头中添加 cookie 字段

而服务器响应时，也需要明确告知浏览器客户端：服务器允许这样的凭据
Access-Control-Allow-Credentials: true 另外特别需要注意的是：对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin: *

细节2-关于跨域获取响应头

在跨域访问时，js只能拿到一些最基本的响应头，例如：Cache-Control、Content-Language、Content-Type、Expires、Last-modified、Pragma，如果需要访问其他头，则服务器需要设置本响应头。
Access-Control-Expose-Headers 头让服务器允许浏览器访问的头放入白名单中
Access-Control-Expose-Headers: authorization, a, b

JSONP

利用script标签跨域通信不受限制的原理，请求一个js文件，返回一个方法调用callback(我们需要数据)，调用浏览器端的 callback 方式，参数就是我们请求到的数据。

  • 只能使用GET请求。如果需要传递参数我们就只能拼接在地址栏后面，所以显而易见的是，jsonp只能使用get请求。
  • 容易产生安全隐患

    恶意攻击者可能使用 ?callback=恶意函数 的方式实现XSS攻击

function jsonp(url, callback){
  new Promise(resolve => {
      let callbackName = '__' + Math.random().toString(36).substring(2)
      window[callbackName] = function(resp) {
        delete window[callbackName]
        resolve(resp)
      }
      const script = document.createElement('script')
      script.addEventListener('load', ()=> {
        script.remove()
      })
      script.src = url+`?callback=${callbackName}`
      document.appendChild(script)
  })
}

json('http://www.baidu.com').then(resp => {
  ...
})
代理(Proxy)。

原理：跨域是浏览器的一个安全策略，服务器与服务器之间通信没有跨域问题。

使用nginx服务器代理

// 启用一个开发服务器
devServer: {
  proxy: {
    '/api': {
      target: 'http://www.baidu.com'
    }
  }
}

如何选择

最重要的，是要保持生产环境和开发环境一致

下面是一张决策图

决策.png

具体的几种场景


截屏2023-03-05 上午11.28.01.png
截屏2023-03-05 上午11.26.42.png

上一篇： I.JSON 和 JS 转换-4。

下一篇： xhr

推荐阅读