網路協定 HTTP?DNS?


Posted by YongChenSu on 2020-12-06

網路協定 HTTP?DNS?

是一種「網路傳輸協定 (protocol)」,了解全球通訊網的基礎,才有辦法依照標準來實作網站。

網際網路協定套組

分為 1. 應用層 2. 傳輸層 3. 網路層 4. 連結層。

http,屬於應用層協定。

Request & Response

瀏覽器發出請求,server 處理後傳 response 回來



在 Network 中查看 header 與 response



DNS server 是什麼?

  • Domain Name System 的簡稱。
  • 負責將 request url 解析為 remote address。
    DNS 的作用就是『讓有意義的,人類較容易記憶的主機名稱(英文字母),轉譯成為電腦所熟悉的 IP 位址!』。

查看 ip 位址的指令 nslookup

nslookup github.com
// Adress: 140.2.112.3


過往避開正版的驗證方式

將欲驗證的網址 (request url) 改為 127.0.0.1 (自己的電腦),或是根本沒有服務的地方,也就沒有 response,因此不會進入驗證。

沒有瀏覽器也可以拿到 response?

利用 request 套件即可在沒有瀏覽器的狀況下拿到 response

request 套件連結

  1. npm install request
  2. 開新的 JS 檔案 (request.js) 將以下程式碼貼上
     const request = require('request');
     request('http://www.google.com', function (error, response, body) {
         console.error('error:', error); // Print the error if one occurred
         console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
         console.log('body:', body); // Print the HTML for the Google homepage.
     });
    
  3. node request.js

  1. node request.js > lidemy.html 可將 log 出來的檔案存成 html 檔案
  2. start lidemy.html 將檔案開啟

渲染出來的樣子
跟課程不太一樣,有可能是因為用 start 指令的關係,目前還不清楚如何在 windows 上使用 open 指令。

Header & Body

  • Header 放額外資訊
    按右鍵檢查後,在 Networks\Headers 裡可查看 General, Response Headers, Request Headers。
  • Body 放主要內容

Get & Post

get:請求展示指定資源

範例:
在瀏覽器網址列貼上下面這串網址後 enter,代表發一個 get 的 request,看 response 是什麼再顯示回來。

post:提交指定資源的實體,通常會改變伺服器狀態或副作用 (side effect)

範例:
在帳戶登錄的頁面登錄後按檢查 > Network



  • form data 是 post 裡所夾帶的資訊



其他 HTTP 的 Method

put:新的內容取代原本的所有內容

patch:修改舊的內容或增加新的內容

option:回傳 server 支援哪些方法

HTTP Status code

1xx 訊息:代表請求已被接受,需要繼續處理


2xx 訊息:代表成功

  • 200 OK
  • 204 Content
    伺服器成功處理請求但沒有返回任何內容。(刪除資源成功)

3xx 重新導向

  • 301 Moved Permanently
    被請求的資源已永久移動到新位置。

    當第一次訪問一個網址,回傳 http status code:301,會伴隨一個 Header,有新的 location 的位置。第二次再訪問同一個網址,則會直接導到新的 location 位置。

  • 302 Found
    被請求的資源暫時移動到新位置。
    當第一次訪問一個網址,回傳 http status code:302。當第二次訪問同一個網址,會先看能否直接導向該網址,無法的話則導向新網址。

4xx 用戶端錯誤:語法錯誤或請求太大

  • 404 Not Found

5xx 伺服器端錯誤

  • 503 Service Unavailable

How To Remember Http Server



實作一個 HTTP Server

var http = require('http')

var server = http.createServer(handleRequest)

function handleRequest(req, res) {
  if (req.url === '/') {
    res.write('welcome')
    res.end()
    return
  }

  if (req.url === '/hello') {
    res.write('hello')
    res.end()
    return
  }

  if (req.url === '/redirect') {
    res.writeHead(302, {
      'Location': 'https://google.com'
    })
    res.end()
    return
  }

  res.writeHead(404)
  res.end()
}

server.listen(5000)  // port



參考資源


#程式導師實驗計畫第四期 #前端 #HTTP #DNS







Related Posts

Day 138

Day 138

關於 React 小書:前端應用狀態管理—狀態提升

關於 React 小書:前端應用狀態管理—狀態提升

Day 29 &  30 - JSON & ERROR & Password Manager

Day 29 & 30 - JSON & ERROR & Password Manager


Comments