iT邦幫忙

2021 iThome 鐵人賽

DAY 5
2
Modern Web

不只是串串API,新手前端30天系列 第 5

DAY05 - API串接常見問題 - CORS - 概念篇 (2)

昨天,我們知道為什麼會看到CORS的錯誤訊息,也知道從web server發出request透過瀏覽器會直接由api server接收,不過所有的request都是這樣嗎?所有request發到api server不給response這樣的機制不會有什麼問題嗎?讓我們今天探討一下web server發出的request吧!

簡單請求 (Simple request) & 預檢請求(Preflight request)

從web server端發起的request其實可以分為兩個種類,“簡單請求(Simple request)”和“預檢請求(Preflight request)"。判斷的方式也蠻簡單的,只要沒有符合以下的條件,就算Preflight Request

成為一個Simple request的條件

  1. metods符合 GET, POST, HEAD 之一
  2. header設定不超出以下範圍:
    • Accept
    • Accept-Language
    • Content-Language
    • Content-type的值為三者之一
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

為什麼需要分Simple request & Preflight Request?

不知道大家還記不記得,昨天有提到,在遇到跨來源的請求瀏覽器會擋掉response,但其實request還是送給server了

聽起來很合理,反正我不要給response web端不就收不到資訊了嗎,那這樣會有什麼問題嗎?我們試著想一個情境,如果web這邊發出了一個request要刪除某個資料,API server收到request,雖然因為跨來源問題在web端收不到response,但request還是收到了,於是就把資料刪除了!!這樣是不是聽起來太不合理了... 於是就把Request分成兩種:simple request & preflight request

若所有request都會直接送到server,不該被執行的request也會被送到server執行(eg.刪除),為了避免這樣的情況,我們需要有simple request & Preflight Request的區分

Simple request & Preflight Request 的差別

Simple request (簡單請求)
Simple Request 其實就是前面有提到的流程:
Web server發出request,API Server收到request,瀏覽器檢查是否來源相同或是有特定的http header,若不符合放行條件,則將response阻擋下來,並發出錯誤訊息通知;若符合條件,則把response傳會給前端web。

Preflight request (預檢請求)

Preflight request 是一個瀏覽器在送出真正的request前,會先送出的輕量request(使用OPTIONS方法),只有header沒有body。header部分,它包含兩個部分的資訊:

  1. HTTP methods (Access-Control-Request-Method)
    表示這個請求的方法,EX. POST, DELETE... 瀏覽器會自動處理
  2. HTTP headers (Access-Control-Request-Headers)
    這個值放的會是這個請求額外自訂的header名稱,若有多個則用“,”區隔,瀏覽器會自動處理將所有不屬於simple request的header欄位都列出來。

送出後Preflight request給API Server後,API Server會回應一個Preflight response,此時便會判斷上述的兩個資訊:methods和headers。若資訊顯示通過,則會告訴瀏覽器是否可以繼續往下執行真正的request,並確認真正的request是否有權限可以將response放行回web server,否則便會給予CORS相關的錯誤訊息。

了解了request的分類後,明天我們就可以看一下瀏覽器怎麼發放放行通行證讓response回到web server囉~~


上一篇
DAY04 - API串接常見問題 - CORS - 概念篇 (1)
下一篇
DAY06 - API串接常見問題 - CORS - 解決CORS問題篇
系列文
不只是串串API,新手前端30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言