什麼是跨來源資源共用(Cross-Origin Resource Sharing , CORS)？

這是在面試中被問到的一個題目，被問到時因為沒有遭遇過這樣的經驗，並不知道意思，但是回家Google後，感覺對於前端工程師來說，是蠻重要的一個問題，特別在使用AJAX存取開放資料，或是自己的系統橫跨了許多網域串接API時，都有機會遭遇到這個問題。

跨來源資源共用（Cross-Origin Resource Sharing (CORS)是當前網站的使用者向不同網域（domain）、通訊埠（port）網站請求如圖片、文字、CSS、JS檔案等等網路資源或資料時，建立的跨來源 HTTP 請求（cross-origin HTTP request），在請求時被阻擋。

部分網域伺服器會因為安全性的緣故，會利用同網域(Same origin policy ) 來保障資料傳輸的安全性，這樣的阻擋使得我們使用AJAX的使用者，無法取得資料。

最常遇到CORS的情境是網頁前端利用AJAX來存取開放資料時，被開放資料平台阻擋了。例如行政院環保署的 AQI 資料，並沒有開放 CORS 存取。或是在系統設計時會需要設計開放部分資料的API，讓外部網域存取。

解決方法包括：

1. 最好的方法是自己架一個 Node.js 的 Server，透過 axios 取得資料、透過 koa傳遞資料出來，再開放 CORS 存取資料。
2. 使用JSONP(JSON with Padding) 是JSON的一種使用模式，透過GET取得資料。
3. 使用API：使用人家已經寫好的API，但需要注意可能有使用次數的限制。

• 如crossorigin.me: 利用 Ajax 存取 http://crossorigin.me/<要抓取資料的URL>
• 使用cors-anywhere 的免費服務

參考資源：

• MDN：跨來源資源共用（CORS）
• Noob’s Space：解決 AJAX 沒辦法取得 CORS（跨網域存取）資料的問題
• 誰說前端爬不了資料
• CORS-Anyawere