趣談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/能夠訪問它

瀏覽器跨域請求的限制

明天見

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。