before_action :about_same_origin_policy
在講述 CORS（Cross-Origin Resource Sharing 跨來源資源共享）之前，
我們必須了解 Same-Origin Policy (同源政策)，Let’s go!
Same-Origin Policy 同源政策
Same-Origin Policy (同源政策) 是一種網頁瀏覽器安全機制，
用於保護網頁內容的安全性和隱私性。
這一政策旨在防止惡意網站從瀏覽器中訪問或修改其他網站的數據。
網頁上的腳本只能與其自身來源的資源進行交互，而不能直接訪問其他來源的資源。
同源政策重點：
同源定義：
同一個源被定義為具有相同的協議（例如，都是http或https）、主機（域名）、端口號的網頁。如果這些信息中有一個不同，就被視為不同源。限制跨源請求：
同源政策禁止網頁上的 JavaScript 腳本通過 XMLHttpRequest、Fetch API 等方式向不同源的服務器發送 HTTP 請求。
這樣可以防止跨站點請求偽造（Cross-Site Request Forgery，CSRF）等攻擊。限制跨文檔對象訪問：
同源政策也限制了不同源的網頁上的 JavaScript 腳本訪問對方的文檔對象（DOM）。
這意味著一個網頁的腳本不能直接訪問其他網頁的 DOM 元素，這有助於保護用戶的隱私和安全。跨源通信：
要實現不同源之間的通信，可以使用一些特殊的技術，
如 JSONP（JSON with Padding）、CORS（跨來源資源共享）等。
這些技術允許服務器明確地授予網頁的請求許可權，以達到跨源通信的目的。
同源政策是基本的保護機制，讓不同源的網站無法存取到資源和資料，
有助於確保網頁內容的安全性，防止潛在的攻擊和數據泄露。
開發者需理解同源政策，並在開發網頁應用程序時遵守此政策，以確保應用程序的安全性和穩定性。
What is CORS?
已經了解同源政策之後，在實務開發上，幾乎無法避免去請求非同源的資源。
在有同源政策的情況下，要怎麼做到非同源請求？
這時候就是要透過 CORS（Cross-Origin Resource Sharing 跨來源資源共享） 啦！
CORS（Cross-Origin Resource Sharing 跨來源資源共享）是一種瀏覽器安全機制，
允許網頁應用程序在不同源（不同域名、協議或端口號）之間進行跨源 HTTP 請求。
CORS 通過特殊的 HTTP 標頭允許或拒絕瀏覽器向其他源發送請求，以確保安全性和隱私。
開發者可以配置伺服器以指定哪些來源可以訪問其資源，從而避免潛在的安全風險，同時實現跨源通信。這對於網頁應用程序與外部 API 或資源進行互動非常重要。
CORS 問題是什麼？
CORS（Cross-Origin Resource Sharing）問題是一種網頁安全問題，當網頁或瀏覽器在一個網域中請求來自另一個網域的資源時，可能會遇到的限制和安全機制。
簡而言之，他涉及當前網頁的來源（域名、協議、端口）與要請求的資源的來源不匹配時，瀏覽器會阻止這種跨源請求，以保護用戶的安全和隱私。
CORS 問題通常發生在 JavaScript 發起的跨源 HTTP 請求（例如 Ajax 請求）
或在 <img>、<script>、<link> 等元素載入外部資源時。
解決CORS問題 - 修改伺服器設定以允許跨源請求、使用代理伺服器、或使用 JSONP 等技術。
CORS問題的存在是為了防止潛在的安全漏洞，例如跨站請求偽造（CSRF）和跨站點腳本攻擊（XSS）。
通過實行同源政策和 CORS，瀏覽器可以確保網頁應用程序只能訪問受信任的來源，以減少潛在的風險。
回顧當初在使用 jspdf 套件，進行 pdf 轉檔功能時，
使用 Base64 編碼解決 jspdf 中 toDataURL() 方法的錯誤，
此種方式可以視為解決 CORS 問題的一種方法，特別是當你在網頁中處理圖像或資源。
通常，當你使用 toDataURL() 方法將畫布內容轉換為 DataURL 時，
該 DataURL 包含對畫布上的圖像或資源的引用。
如果這些圖像或資源來自不同的源（例如，不同的域名），並且該源未設置 CORS 支持，則在使用 toDataURL() 時可能會觸發 CORS 錯誤，因為該操作被視為跨源請求。
通過將圖像或資源的 URL 轉換為 Base64 編碼，然後使用 Base64 編碼的資料 URL 嵌入到網頁中，可以避免 CORS（跨來源資源共享）問題。
這是因為該資源不再是通過瀏覽器的 HTTP 請求來載入的，瀏覽器不需要發出跨域請求來獲取圖像，而是直接內嵌在網頁中，因此不需要跨源請求，也不受同源政策的限制。
設置 CORS 標頭是一種解決 CORS 問題的方法，但它要求你有控制權限的伺服器，能夠配置伺服器以允許跨源請求。
然而，如果你無法控制來源伺服器或無法更改其 CORS 設置，那麼使用 Base64 編碼是一種繞過 CORS 問題的有效方法，因為資源是在網頁內部處理的，不需要跨源請求的許可權。
參考資料：
➫ CORS 是什麼? 為什麼要有 CORS?