使用 Google Apps Script 解決 CORS 問題

發表於 2019-06-17 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

在現代的前端開發中，很常使用 AJAX 取的遠端資料，但是卻也很容易取得 CORS，這邊就來記錄一下該如何使用 Google 提供的 Google Apps Script 來解決 CORS 問題

前言

CORS

使用 Google Apps Script 之前要先來科普一下 CORS 到底是什麼東西

CORS

CORS 全名是 跨來源資源共用（Cross-Origin Resource Sharing (CORS)），一般來講後端都會開一隻 API 給前端做 AJAX 的連結，但是如果隨意開放 API 給網路上的人使用這是會有很大的安全性隱慮，所以這邊也會牽扯到一個所謂的同源政策 (Same-origin policy) ，讓我們試著舉例一個情境來了解什麼是同源政策

假設你今天在家裡有冰箱、電視，你想開冰箱就可以開冰箱，你想看電視就開電視，而這觀念就是所謂的同源政策，因為這是你家你想怎樣就可以怎樣，反之，你就不能夠隨便開別人家裡冰箱、電視甚至在別人家洗澡。

所以在自己家裡就是同源，而你去動用別人家裡也就是不同源，那就是跨域，那就會有許多限制。

現在回頭講講 CORS，CORS 是一個瀏覽器的規範，它可以幫助我們透過 Web 從不同的網域來取得資料進而避免發生同源政策的問題

通常 CORS 最長使用的 JavaScript 方法有兩種 XMLHttpRequest 或 Fetch，通常可能有些資料是限制僅可以在同一個網域下才可以存取，所以當你如果是在不同網域，那就會出現 CORS 錯誤

CORS

基本上有許多人都會認為 CORS 是前端必備的技能之一，但是其實 CORS 大多都會與後端有比較大的關連性，因為必須透過後端來設置相關的 header。

那我們該如何確定該 API 是否有開放 CORS?通常 CORS 會在 hearder 中加入 Access-Control-Allow-Origin，我們可以透過這個指令來檢查

1	curl curl --verbose -X POST [URL]

1	curl --verbose -X POST "https://github.com/hsiangfeng/JSHomeWork/blob/master/JSON/datastore_search.json"

如果有加入 Access-Control-Allow-Origin，你就可以看到Access-Control-Allow-Origin: *

Access-Control-Allow-Origin

如果沒有的話就會找不到 Access-Control-Allow-Origin

Access-Control-Allow-Origin

所以當我們請求 (request) API 時，若回傳 (response) 沒有 Access-Control-Allow-Origin 那就會出現 CORS 錯誤

如果想更了解 CORS 其實可以看看 MDN 寫的詳細文件

撰寫 Google Apps Script

首先進入自己的 Google 雲端硬碟，點右鍵 “更多” → “Google Apps Script”

Google Apps Script

接下來將會開啟一個類似線上寫程式的畫面，將以下程式碼貼入

注意 function 名稱一定要為 doGet，否則無效。

function doGet(e){
  var url = e.parameter.url; // 取得傳入 URL
  var response = UrlFetchApp.fetch(decodeURIComponent(url),{ // 發出 GET 請求，並設定 hearder json
    headers: { "Content-type" : "application/json" }
  });
  var data = JSON.parse(response.getContentText()); // 取得 json 資料
  return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON); 
}