CORS，全稱(chēng)為跨源資源共享，是一種瀏覽器安全機(jī)制，用于限制在一個(gè)源（協(xié)議、域名、端口）上運(yùn)行的Web應(yīng)用訪問(wèn)另一個(gè)源上的資源。為了確保安全性，瀏覽器在發(fā)送實(shí)際請(qǐng)求前，會(huì)先發(fā)起一個(gè)預(yù)檢請(qǐng)求（OPTIONS 請(qǐng)求），以確認(rèn)目標(biāo)服務(wù)器是否允許該請(qǐng)求。
這種機(jī)制雖然提升了安全性，但也帶來(lái)了性能問(wèn)題。每個(gè)請(qǐng)求都需要額外的預(yù)檢請(qǐng)求，尤其是在前端與后端位于不同地理位置時(shí)，延遲會(huì)顯著增加。例如，從南非到 AWS 的 us-east-1 區(qū)域的往返時(shí)間為 400 到 800 毫秒，而預(yù)檢請(qǐng)求會(huì)使延遲翻倍，達(dá)到 800 到 1200 毫秒。
解決CORS問(wèn)題的根本方法是將前端和后端部署在同一個(gè)源上。對(duì)于傳統(tǒng)的單服務(wù)器應(yīng)用程序，這并不是問(wèn)題，但當(dāng)前端和后端分離時(shí)（如前端通過(guò)CloudFront托管，后端使用API Gateway），就需要通過(guò)反向代理來(lái)解決。
反向代理是一種服務(wù)器配置，它允許客戶(hù)端通過(guò)當(dāng)前源訪問(wèn)其他目標(biāo)源的資源，并將這些資源返回給客戶(hù)端，使其看起來(lái)像是來(lái)自當(dāng)前源。
在我們的案例中，前端代碼通過(guò)CloudFront的路徑（如/backend-api/）發(fā)起請(qǐng)求，CloudFront會(huì)將這些請(qǐng)求轉(zhuǎn)發(fā)到API Gateway。這樣，前端無(wú)需直接調(diào)用API Gateway，從而避免了CORS問(wèn)題。
該項(xiàng)目使用AWS CDK進(jìn)行基礎(chǔ)設(shè)施配置，主要包括以下組件：
完整代碼可以在 GitHub 倉(cāng)庫(kù) 中找到。
/cf-apigw路徑下的所有請(qǐng)求轉(zhuǎn)發(fā)到API Gateway域。/cf-cust-domain路徑轉(zhuǎn)發(fā)請(qǐng)求到API Gateway的自定義域。通過(guò)CloudFront域訪問(wèn)時(shí)，可以看到一個(gè)基本的HTML頁(yè)面，用于測(cè)試請(qǐng)求的詳細(xì)信息。在本地主機(jī)運(yùn)行時(shí)，由于域名不同，瀏覽器會(huì)發(fā)送OPTIONS預(yù)檢請(qǐng)求。而通過(guò)CloudFront域訪問(wèn)時(shí)，預(yù)檢請(qǐng)求被消除，顯著降低了延遲。
以下是兩種場(chǎng)景下的網(wǎng)絡(luò)請(qǐng)求對(duì)比：
通過(guò)CloudFront反向代理API Gateway，可以有效消除CORS問(wèn)題，顯著降低API請(qǐng)求的延遲。對(duì)于同時(shí)控制前端和后端的開(kāi)發(fā)者來(lái)說(shuō)，這是一種簡(jiǎn)單高效的解決方案。無(wú)論使用何種技術(shù)或框架，反向代理的概念都可以應(yīng)用于類(lèi)似場(chǎng)景。
完整項(xiàng)目代碼和更多細(xì)節(jié)，請(qǐng)參考 GitHub 倉(cāng)庫(kù)。
原文鏈接: https://rehanvdm.com/blog/cloudfront-reverse-proxy-api-gateway-to-prevent-cors