儘管我允許“https://example.com/”，但來自來源“https://example.com”的訪問已被阻止

當嘗試跨網域存取資源時，開發人員經常會遇到與Access-Control-Allow-Origin header 相關的問題。解決這些問題的關鍵在於理解CORS協定背景下「起源」的準確意義。

CORS中起源的概念

In CORS，起源是方案、主機（域）和連接埠的組合。重要的是，它不包含路徑。因此，以下兩個來源被認為是不同的：

• https://example.com
• https://example.com/path/to/resource

問題：起源中的尾部斜杠

這種特殊情況下的問題源於對起源定義的誤解。具體來說，根據 CORS 協定規範，不允許在允許的來源中使用尾部斜線。因此，瀏覽器發送的原始標頭（不含尾部斜杠）與伺服器上配置的允許來源不符。

解決方案：從允許來源中刪除尾部斜杠

要解決此問題，只需從CORS 配置中允許的原始值中刪除尾部斜杠即可。在這種情況下，正確的允許來源將是：

• https://googledocs-clone-sbayrak.netlify.app

透過此修改，瀏覽器的來源標頭將匹配允許的來源，並且CORS 將成功允許。