Skip to content

後端 API 加上 CloudFront ,前端呼叫異常

公司的網站一直一來都是採用前後端架構,前後端都使用 CloudFlare 作為 CDN ,近期 CloudFlare 一直常常出問題,所以決定搬 CDN 去 AWS CloudFront。搬完家後,發現呼叫同一隻 API (儲存購物車),有時可以成功,有時候又失敗。

我試著打開開發人員工具看看,呼叫後的錯誤訊息。Network 會出現 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 的問題。

我原本以為是 CORS 的問題,所以試著在在cache policy 加入 origin 「forward the headers using a cache policy」。確保從 client 送出的連線,如果 Origin 不同,彼此絕對不共用快取結果,依舊沒有解決這個問題。後來,去 CloudWatch 看到錯誤的原因,出現這樣的錯誤:

RID:UuU1L_7mWcIdyXZj66Tgc98oa68YwKTM_koBSNGs17JPUG6FZRbPcw== / Feb 07 18:04:48 UTC+8 2024


研究了一下,是因為連線經過 CloudFront 後,緊接著到了 WAF 檢查,而這筆連線符合 WAF 的 block rule,因此受到阻擋。 我透過 CloudWatch 的指標跟時間點進行交叉比對,看起來是 WAF 規則的 SizeRestrictions 所觸發。

才知道原來是我開了 WAF ,而 WAF 的 http body 預設規則大小是 16 KB。也就是因為這樣,如果在呼叫購物車這隻 API ,使用者如果放太多東西的話,那就會出現錯誤。

既然預設規則太小,就去調整 Body size limit 吧

結果他能調整最高的上限是 64 KB ,這就很傷腦筋,因為有的時候,還是會有要上傳圖片之類的需求。

既然,不能用的話,我們就自己設定規則,我們到 Rules 標籤,點選 Add rules ,點選 Add my own rules and rule groups

Name 隨便填寫即可,Type 要選擇 Regular rule

If a request 要選擇 matches the statementInspect 要選擇 body


Match type 選擇 Size greater than or equal toSize in bytes 選擇你想要限制的最大上限。

Oversize handling 選項,有 3 種值可選,分別為 Continue / Match / No Match,必須要選Continue

Save 儲存後,記得將優先權調高。

接著回到 Rules , 找到 AWS-AWSManagedRulesCommonRuleSet ,點進去後,點到 SizeRestrictions_BODY,編輯他的值(透過下拉選單選擇)必須為 override to allow 或是 override to count

因為 rule-SizeRestrictions_BODY 是造成我們連線 403 的 WAF 預設規則,每當我們 WAF 檢查到這條 rule 時,就會被 block 了。因此我們的做法就是略過這條 body size 的規則,取而代之用我們自己定義的 body size 檢查 rule 就好。如此一來就可解決被 WAF block 的情況!

Published in未分類

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

error: 尊重智慧財產權,請不要隨意複製使用文章喔