發生跨域的時候，伺服器到底有沒有接收到請求？

語言: CN / TW / HK
時間 2022-05-18 05:15:07

背景：

大家好，我是 東東吖，一名前端工程師。今天，我發現前端技術交流群裡的小夥伴比較安靜，所以我丟了一個題目給大家討論。

bdc1689dd957e10097c44960a9e4a2e.jpg

對於這個問題，其實很簡單，但是大家作為前端工程師，沒有接觸過後端，所以難免會對這個問題不太瞭解。

口說無憑，實踐出真理。接下來，我們就對這個問題進行驗證，有助於大家理解深刻。

前提：

前提一：擁有一個客戶端專案。在此之前，我是作為一個前端工程師的身份給大家講解的，所以你自己要有建立前端專案的能力。當然，你也可以直接拉取我的github。

前提二：擁有一個後端伺服器。對於後端，我將用node作為後端伺服器，這篇文章可以幫助大家手把手搭建一個簡單的伺服器：從0到1學習Node.js系列教程（一）：API介面初體驗，當然，你也可以直接拉取我的github。

如果你跨域問題不太瞭解，不知道怎麼解決跨域，可以先移步到我這篇文章： 跨域問題及前後端常見解決方案？

對於github拉取時網路超時問題，你可以通過修改host檔案來解決。 找到host資料夾，用寫字版開啟，把ip複製貼上到檔案末尾，儲存即可。

image.png

image.png

``` C:\Windows\System32\drivers\etc\HOSTS

http://github.com/140.82.1123 http://github.com

185.199.108.153 http://asset-cdn.github.com

199.232.69.194 http://github.global.ssl.fastly.net

185.199.108.133 http://githubusercontent.com

199.232.96.133 http://raw.githubusercontent.com

```

驗證：

通過上面的兩個大前提條件，你已經擁有了一個前端專案，也擁有了一個後端專案，你就可以來輕鬆驗證我剛剛提出的問題了。

首先，我們來將拉取前後端專案，下載依賴，啟動專案。 我們開啟前端專案，點選node選單欄，重新整理瀏覽器，就會發送一個get請求和post請求，並且請求成功了。

image.png

image.png 開啟我們的服務端，我們可以看見從前端專案發來的兩個請求，並接收到了引數。

image.png

此時是因為我們在伺服器端設定了跨域的程式碼，接下來，我們將註釋掉伺服器端解決跨域的程式碼，再次啟動伺服器端。

image.png

由於我們此時註釋掉了解決跨域的程式碼，那麼我們再去前端專案的node選單欄重新整理瀏覽器，就會發生跨域問題。

註釋程式碼之後，你還可能發生get請求依然沒有發生跨域，post請求發生了跨域，就像下面這樣。

38a192c6b73c464104705dc171190b1.png

這個時候是因為快取的原因，需要把快取禁用掉，把Disable cache 打上√。再次重新整理就會發現get請求和post請求都發生了跨域。

image.png

我們再來檢視後端伺服器的日誌。

image.png

我們會發現，伺服器是能接收到get請求，但是接收不到post請求，post請求只會接收到一個預檢請求，接收不到真正的http請求。

總結：

簡單請求，伺服器是能接收到請求的，也會返回響應，但是返回的時候，會被瀏覽器攔截；複雜請求，瀏覽器會先發一個預檢請求，去驗證伺服器是否允許跨域，如果允許跨越，才會發起真正的http請求，否則伺服器接收不到真正的http請求。

如果你對簡單請求、複雜請求（非簡單請求）、預檢請求等概念不瞭解，可移步到這篇文章： 面試官：說說你對 options 請求的理解

我是東東吖，一名前端工程師，關注我，帶你走進前端的世界。

「」
「」