由於響應中不存在“Access-Control-Allow-Origin”header，跨域請求停止工作

Question

我有一個使用 Google Apps 腳本創建的錯誤報告信標，它被發布為以我自己的身份運行，並且“任何人，甚至是匿名的”都可以訪問，這應該意味着允許對 GAS 的 X 域請求。

但是，我的瀏覽器現在指示在代碼發布到信標后，響應中沒有Access-Control-Allow-Origin header。

我在這里錯過了什么嗎？ 就在兩個月前，這曾經起作用。 只要發布 GAS 供公眾訪問，它就會設置Access-Control-Allow-Origin header。

在 Google Apps 腳本中：

代碼.gs

$.post(beacon_url, data, null, "json");

客戶端：

腳本.js

 $.post(beacon_url, data, null, "json");

Answer 1

在調用 contentservice 腳本時，我總是為 JSONP 發送回調。 由於 GAS 不支持 CORS，這是確保您的應用在 x 域問題到來時不會中斷的唯一可靠方法。

在 jQuery 中進行調用只需添加“&callback=?”。 它會弄清楚其他一切。

 var url = "https://script.google.com/macros/s/{YourProjectId}/exec?offset="+offset+"&baseDate="+baseDate+"&callback=?";
 $.getJSON( url,function( returnValue ){...});

在服務器端

function doGet(e){
 var callback = e.parameter.callback;
 //do stuff ...
 return ContentService.createTextOutput(callback+'('+ JSON.stringify(returnValue)+')').setMimeType(ContentService.MimeType.JAVASCRIPT);
}

Answer 2

我已經因為同樣的問題失去了幾個小時。 解決方法很簡單。

當您將腳本部署為 webapp 時，您將獲得兩個 URL： /dev一個和/exec一個。 您應該使用/exec one 來發出跨域 POST 請求。 /dev始終是私有的：它需要獲得授權並且不設置 *Allow-Origin 標頭。

PS。： /exec似乎被凍結了——它不會反映任何代碼更改，直到您使用新版本字符串（部署對話框中的下拉列表）手動部署它。 要使用/dev URL 調試最新版本的腳本，只需安裝替代瀏覽器並禁用其網絡安全功能（GoogleChrome 中的--disable-web-security ）。

Answer 3

只是為了讓像我這樣只對 POST 請求感興趣的人更簡單：

function doPost(e){

 //do stuff ...

 var MyResponse = "It Works!";

 return ContentService.createTextOutput(MyResponse).setMimeType(ContentService.MimeType.JAVASCRIPT);

}

Answer 4

我偶然發現了同樣的問題：

• 在本地主機上運行網頁時，從瀏覽器調用/exec -urls 運行良好
• 從 https 域調用時拋出跨域錯誤

我試圖避免將我的 POST JSON-clientcode 重構為 JSONP（我持懷疑態度，因為以前總是有效的）。

可能的修復 #1

幸運的是，在我從 https 域在瀏覽器中執行了一個非 CORS 請求（ fetch() ，使用mode: no-cors ）之后，通常的 CORS 請求再次正常工作。

最后的想法

最后一個解釋可能是：每個新的 appscript-deployment 在其配置實際穩定在服務器級別之前都需要一些時間/使用。

Answer 5

以下解決方案對我有用

在 Google Apps 腳本中

function doPost(e) {
  return ContentService.createTextOutput(JSON.stringify({status: "success", "data": "my-data"})).setMimeType(ContentService.MimeType.JSON);
}

JavaScript

fetch(URL, {
      redirect: "follow",
      method: "POST",
      body: JSON.stringify(DATA),
      headers: {
        "Content-Type": "text/plain;charset=utf-8",
      },
    })

注意屬性redirect: "follow"這是非常非常重要的。 沒有它，它對我不起作用。

Answer 6

當我嘗試將應用程序腳本應用程序與另一個 Vue 應用程序集成時，我遇到了類似的 CORS 策略錯誤問題。

請注意以下配置：

1. 每個部署的項目版本都應該是新的。
2. 如果您想授予所有人的訪問權限，請像我一樣執行該應用程序。
3. 誰有權訪問該應用程序的任何人，匿名。

希望這對你有用。

Answer 7

我的情況不同，我正以一種非常奇怪的方式面對 CORS 錯誤。

我的代碼工作正常，沒有 CORS 錯誤，直到我添加了一個常量：

const MY_CONST = "...";

似乎 Google Apps Script (GAS) 不允許使用 'const' 關鍵字，GAS 是基於 ES3 或 ES5 之前的或類似的東西。 “const”上的錯誤重定向到沒有 CORS 的錯誤頁面 URL。

參考：
https://stackoverflow.com/a/54413892/5581893

Answer 8

如果這對所有像我這樣的人有幫助：

我有一個 .js 文件，其中包含我所有的實用程序函數，包括調用 GAS 的函數。 當我去測試更新時，我總是忘記清除我的緩存，所以我經常會遇到這種錯誤，因為緩存的代碼使用的是 /dev 鏈接而不是 /exec 鏈接。

Answer 9

在您的調用應用程序中，只需將內容類型設置為 text/plain，您就可以將 GAS 返回的 JSON 解析為有效的 json 對象。

這是我的 google 腳本 doPost 函數中的 JSON 對象

var result = {
  status: 200, 
  error: 'None',
  rowID: rowID
};

ws.appendRow(rowContents);

  return ContentService.createTextOutput(JSON.stringify(result))
  .setMimeType(ContentService.MimeType.JSON);  

在這里我從節點 js 調用我的應用程序腳本 API

           const requestOptions = {
                method: 'POST',
                headers: {'Content-Type': 'text/plain'},
                body: JSON.stringify({param1: value, param2:value})
            };
const response = await fetch(server_URL, requestOptions);
            const data = await response.json();
            console.log(data);
            console.log(data.status);