1. 全栈程序员必看首页

http数据协商

全栈程序员-用户IM • • 未分类

http数据协商

数据协商的概念

客户端发送请求给服务端，客户端会声明请求希望拿到的数据的格式和限制，服务端会根据请求头信息，来决定返回的数据。

分类

请求 Accept

返回 Content

Accept

Accept 声明想要数据的类型

Accept-Encoding 数据以哪种编码方式传输，限制服务端如何进行数据压缩。

Accept-Language 展示语言

User-Agent 浏览器相关信息，移动端、客户端、pc端的浏览器 User-Agent 不同。

Content

服务端返回

Content-Type 对应 Accept，从 Accept 中选择数据类型返回

Content-Encoding 对应 Accept-Encoding，声明服务端数据压缩的方式

Content-Language 对应 Accept-Language，是否根据请求返回语言

浏览器请求 html 时的头信息

启动服务器 node server.js，localhost:8888 端口访问，test.html先设为空。

// server.js
const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
  console.log('request come', request.url)

  const html = fs.readFileSync('test.html')
  response.writeHead(200, {
    'Content-Type': 'text/html',
    // 'X-Content-Options': 'nosniff'
    // 'Content-Encoding': 'gzip'
  })
  // response.end(zlib.gzipSync(html))
  response.end(html)
}).listen(8888)

console.log('server listening on 8888')
复制代码

查看 network 的 localhost 文件的请求信息，浏览器会自动加上这些头信息。

Response Headers

Connection: keep-alive
Content-Type: text/html
Date: Fri, 21 Sep 2018 02:29:16 GMT
Transfer-Encoding: chunked

Request Headers

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9 Cache-Control: max-age=0 Connection: keep-alive Cookie: Host: localhost:8888 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 复制代码

请求头

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

浏览器可以接收这些格式的数据，可以进行设置。

Accept-Encoding: gzip, deflate, br

数据编码方式，gzip 使用最多；br 使用比较少，但压缩比高。

Accept-Language: zh-CN,zh;q=0.9

浏览器会判断本系统的语言，自动加上。q 代表权重，数值越大权重越大，优先级越高。

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Mozilla/5.0 浏览器最早是网景公司出的，当时默认头是 Mozilla/5.0，很多老的 http 服务器只支持这个头，所以加上兼容老的 web 服务器。

AppleWebKit/537.36 浏览器内核 ，chrome 和 safari 等现代浏览器大部分使用 webkit 内核，webkit 内核是苹果公司开发的

KHTML 渲染引擎版本，类似于 Gecko，火狐浏览器渲染引擎

Chrome/68.0.3440.106 chrome 版本号

Safari/537.36 因为使用了 webkit 内核，所以会加上

服务端根据数据协商的信息进行判断，返回客户端想要的信息。

在发送 ajax 请求时可以自定义设置 accept 相关信息

content type 相关

mime type

Accept-Encoding

数据压缩

请求文件大小 933B，使用 gzip 压缩后是 609B

// server.js
const http = require('http')
const fs = require('fs')
const zlib = require('zlib') // 引入包

http.createServer(function (request, response) {
  console.log('request come', request.url)

  const html = fs.readFileSync('test.html') // 这里不加 utf8，加了返回的就是字符串格式了
  response.writeHead(200, {
    'Content-Type': 'text/html',
    // 'X-Content-Options': 'nosniff'
    'Content-Encoding': 'gzip'
  })
  response.end(zlib.gzipSync(html)) // 压缩
}).listen(8888)

console.log('server listening on 8888')
复制代码

请求文件响应头

Response Headers

Connection: keep-alive
Content-Encoding: gzip // 返回的压缩算法方式
Content-Type: text/html
Date: Fri, 21 Sep 2018 02:58:54 GMT
Transfer-Encoding: chunked
复制代码

Content-type

用来协商客户端和服务端的数据格式和声明

发送请求时，会有不同的请求内容，根据内容不同设置不同的 content-type

chorme浏览器设置，勾选 Preserve log，当页面跳转后，也会把之前的请求打印出来

发送表单数据

<body>
  <form action="/form" method="POST" id="form" enctype="application/x-www-form-urlencoded">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit">
  </form>
</body>
</html>
复制代码
Request Headers
Content-Type: application/x-www-form-urlencoded // content-type 就是 form表单中设置的

Form Data
name=sf&password=sfs
复制代码

服务端根据 content-type 是 x-www-form-urlencoded来对body 中的数据进行转化即可。

如果表单数据中有文件

<body>
  <form action="/form" method="POST" id="form" enctype="multipart/form-data">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="submit">
  </form>
  <script>
    var form = document.getElementById('form')
    form.addEventListener('submit', function (e) {
      e.preventDefault()
      var formData = new FormData(form)
      fetch('/form', {
        method: 'POST',
        body: formData
      })
    })
  </script>
</body>
复制代码

代表请求是有多个部分的，有时通过表单上传文件时，必须要把文件部分单独拆分出来，文件不能作为字符串进行传输的，要作为二进制的数据进行传输；使用 x-www-form-urlencoded 这种拼接字符串的方式 是不对的

Request Headers
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary39Ug3FSPIBvDYZd6

Request Payload
------WebKitFormBoundary39Ug3FSPIBvDYZd6
Content-Disposition: form-data; name="name"

sdfs
------WebKitFormBoundary39Ug3FSPIBvDYZd6
Content-Disposition: form-data; name="password"

sdfs
------WebKitFormBoundary39Ug3FSPIBvDYZd6
Content-Disposition: form-data; name="file"; filename="1536973449110.png"
Content-Type: image/png


------WebKitFormBoundary39Ug3FSPIBvDYZd6--
复制代码

boundary=----WebKitFormBoundarybwAbNlPF2bBcTLuA用来分割表单提交数据的各个部分

服务端拿到表单数据后，根据这个分割字符串，进行数据分割。

转载于:https://juejin.im/post/5ba5a643f265da0adb30d0a1

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/101404.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号