發生跨域的時候,服務器到底有沒有接收到請求?

語言: CN / TW / HK

背景:

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

bdc1689dd957e10097c44960a9e4a2e.jpg

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

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

前提:

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

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

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

對於github拉取時網絡超時問題,你可以通過修改host文件來解決。 找到host文件夾,用寫字版打開,把ip複製粘貼到文件末尾,保存即可。

image.png

image.png

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

https://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 請求的理解

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