用node來實現一個簡單的HTTP服務

在終端啟動服務

瀏覽器端

關於HTTP的header的一些功能

什麼是HTTP的客戶端：最簡單最常用的HTTP客戶端就是瀏覽器，瀏覽器不僅發送HTTP請求和返回內容，還幫我們處理了返回的內容。

這個就是HTTP的首行信息，並不屬於headers裡面的內容，

再看response

response其實是一堆html代碼。返回的這些html如何變成我們看到的頁面呢？瀏覽器又做了一些工作。

用curl來請求

返回的內容很少，瀏覽器會識別這些標籤。

可以用curl -v 來更詳細的展示請求和返回的header和general相關的一些東西。

用curl不會像瀏覽器一樣去渲染。

瀏覽器同域的限制

兩個埠不一樣的server

啟動這兩個服務，這時候我們是用8888埠去請求8889，瀏覽器中觀察下

確實有了html的結構

但是

因為8889埠沒有設置允許跨域的header，所以出現了跨域問題。

我們可以在server2.js裡面設置

重啟一下服務，

再到瀏覽器中，就沒有報錯了，並且成功請求了8889

不管我們有沒有返回header，瀏覽器都會向我們這個服務發送這個請求。瀏覽器在發送這個請求的時候，並不知道這個服務是不是跨域。

請求已經發送了，內容也已經返回了，只是瀏覽器在解析了這個返回的內容之後，它發現這個是不允許的，就幫我們攔截了，這其實是瀏覽器提供的一個功能。

如果在curl裡面，隨便怎麼發送，都是沒有跨域的概念的。

跨域的方法：jsonp

這樣子請求依舊是成功的，瀏覽器允許向link、img、script標籤，在標籤上src載入一些內容的時候，是允許跨域的。並不在乎伺服器是否設置了跨域的頭。

jsonp實現的原理就是在script標籤裡面載入了一個鏈接，這個鏈接訪問了伺服器的某一個請求，並且返回了內容。因為伺服器返回的內容是可控的，所以我們可以在伺服器的返回內容裡面寫script標籤裡面的代碼，是一段可執行的js代碼。然後調用jsonp在發起請求之前，給我們設置的一些內容。

跨域的頭的設置

如果把Access-Control-Allow-Origin設置為*，是不安全的，因為任何人都可以訪問，可以把*設置為某一個特定的域名，比如設置為xxx.com當然不會有這個域名來請求這個服務。我們可以把頭設置為127.0.0.1，依然可以實現跨域。這個頭只能設置一個值，不能設置為多個值。

html文件我們用fetch

server2.js文件不變

我們寫的X-Test-Cors在跨域請求的時候是不被允許的。

其他限制：

在跨域的時候允許的方法：GET HEAD POST ，其他的方法默認不允許，預請求會驗證。這三個方法不需要預請求。

允許的Content-Type：text/plain multipart/form-data application/x-www-form-urlencoded，其他的值也要通過預請求之後才能進行發送。

其他限制：請求頭限制（比如上文的請求頭），XMLHttpRequestUpload對象均沒有註冊任何事件監聽器，請求中沒有使用ReadableStream對象。

CORS的預請求

瀏覽器根據什麼判斷這個返回的內容是不是允許的呢？就是header。

如果我們要允許我們自定義的頭在請求裡面發送，我們需要返回一個新的頭來告訴瀏覽器，這個操作是允許的。

這個時候瀏覽器是請求成功的。

但是比之前多出一個請求，就是預請求。method為OPTIONS.

類似的，我們也可以通過設置，來使用除了GET HEAD POST這三個方法以外的方法。

還可以設置一下，Access-Control-Max-Age: 1000 在這個請求下面允許以這種方式實現跨域的請求的最長時間，比如，1000秒之內不需要再發送預請求來驗證了，發正式請求就可以了。

推薦閱讀：

相關文章