趣谈http第2篇

时间 2020-06-09

标签 http 栏目 HTTP/TCP 繁體版

原文原文链接

http报文

请求报文

起始行

第一部分：显示methodhtml

method有不少种:get得到 post建立 put 更新 delete 删除等node

可是它这个定义只是一张纸上这么写的，咱们彻底能够按照咱们本身的方法去实现这个web服务git

好比说你想经过这个method把数据更新掉彻底没有问题只不过你没有遵循http协议的语义化的定义去作web

这样作的坏处是，若是有个不知情的人访问你的服务，他可能一不当心作了他他认为安全的操做，结果数据更新掉了。这就是语义存在的意义json

第二部分显示URL，通常只存放路由部分，由于你发送请求以前，tcp已经链接了，你已经知道你要去哪一个主机，因此只须要告诉我你要访问哪一个资源就行跨域

第三部分显示协议版本如今通常用http1.1 ，http2很快会普及浏览器

头部

描述我想要接收到的数据的格式安全

没有主体bash

响应报文

起始行:

第一部分:协议版本服务器

第二部分:code ，表明这个请求如今是处于一个什么样的状态 200表示是正常的 OK的我能够正常返回给你内容

200到300 300到400……都有它们的含义，含义是啥，就是后面那个英文的意思，这里是OK

典型的，好比401，表示你发送这个请求的时候没有认证，没法获取资源

可是在国内不少作web开发的同窗，作服务器的时候，在他们眼里httpcode只有两种，200和500，无论数据请求是正确的，错的，仍是没有认证，都会返回200，再返回一个数据，在这个数据里面，再去说明这个请求究竟是正确仍是错误。

这样的作法不够优秀，咱们要听从code语义，这样咱们的服务更通用，更严谨

首部与主体

它们之间不止一条线，还有个空行

node建立本地服务器

建立一个本地服务器并启动

const http = require('http')

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

}).listen(8800)

console.log('on')
复制代码

启动成功

在gitbash里面，经过curl，咱们能够得到一些信息，其实在浏览器里咱们也能看，不过用这个工具更好

跨域实际上是浏览器的规定

咱们先来模拟一下跨域，感觉一下

01.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var xhr =new XMLHttpRequest()
    xhr.open('GET','http://127.0.0.1:8801/')
    xhr.send()
  </script>
</body>
</html>
复制代码

02.js

const http = require('http')

http.createServer(function(request,response){
  console.log('request come',request.url)
  
  response.end('123') 
}).listen(8801)

console.log('on')
复制代码

01.js

const http = require('http')
const fs =require('fs')

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

  const html =fs.readFileSync('01.html','utf8')
  //设置head
  response.writeHead(200,{
    'Content-Type':'text/html'
    //Content-Type的做用，设置浏览器把文件解析为何形式
  })
  response.end(html) 

}).listen(8800)

console.log('01.js on')
复制代码

启动01.js,报错，由于它没有设置服务端容许跨域的头

那咱们要怎么设置才能使它能够跨域呢？

咱们给02.js添加头部信息，返回头（其实至关于服务端设置容许你跨域访问我）

const http = require('http')

http.createServer(function(request,response){
  console.log('request come',request.url)
  
    response.writeHead(200,{
    'Access-Control-Allow-Origin':'*'
  })
  response.end('123') 
}).listen(8801)

console.log('on')
复制代码

再次起01服务，没有报错，且在network能够看到请求过来的信息

咱们就经过一个步骤就让02服务接受跨域了，可是通过验证，咱们发现，即便咱们没有给02.js添加头部信息，返回头

启动02服务后，打印了request come/,因此其实这个请求已经发到了，

说明浏览器在发送这个请求的时候，它不知道咱们这个服务是否是跨域的，因此它仍是会发送请求，而后接收返回内容，只不过浏览器在接收到数据返回的时候，它发现没有头和设置容许（'Access-Control-Allow-Origin':'*'）

而后它就会把这个返回的数据忽略掉，而后再给你报个错

因此说请求是已经发送了，内容也已经返回了，只不过浏览器在解析这个内容的时候发现有误，因此它帮你拦截掉了！！这就是浏览器的功能

因此若是你在你本身的curl里发送，就没有跨域的概念，任何http请求均可以发送到，也能够返回内容而且输出

jsonp实现的原理

利用了浏览器对link img script等标签里面的url路径，加载内容时，是容许跨域的，浏览器不介意服务器有没有设置头

试一试，咱们改一下两个文件

02.js

const http = require('http')

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

  // response.writeHead(200,{
  //   'Access-Control-Allow-Origin':'*'
  // })
  response.end('123') 

}).listen(8801)

console.log('on')
复制代码

01.html

<!-- <script>
    var xhr =new XMLHttpRequest()
    xhr.open('GET','http://127.0.0.1:8801/')
    xhr.send()
  </script> -->
  <script src="http://127.0.0.1:8801/"></script>
复制代码

结果运行发现不报错，也请求成功了

就是在script标签里面去加载了一个连接，这个连接去访问服务器的某个请求，而且返回了内容。由于服务器返回的内容是可控的，因此在返回的内容里面的script标签里面写的可执行的js代码

在代码里面去调用jsonp,在发起请求以前，设置的一些内容

？？？？好抽象

response.writeHead(200,{
   'Access-Control-Allow-Origin':'*'
 })
复制代码

跨域的头只有这样设置吗？

'*'表明谁均可以访问，因此这样是不安全的，那咱们能够怎么改呢？

response.writeHead(200,{
  'Access-Control-Allow-Origin':'http://127.0.0.1:8800'
 })
复制代码

这样就能够啦，这样就只有http://127.0.0.1:8800/能够访问它

浏览器跨域请求的限制

明天见