由于响应中不存在“Access Control Allow Origin”标头，跨域请求停止工作

Cross-domain requests stopped working due to no `Access-Control-Allow-Origin` header present in the response

本文关键字：标头 Origin Allow 停止工作 请求 Control Access 于响应 响应 不存在      更新时间：2023-09-26

我有一个错误报告信标，我使用谷歌应用程序脚本创建，它被发布为以我自己的身份运行，并且可以访问"；任何人，甚至是匿名者；应该意味着允许对GAS的X域请求。

然而，我的浏览器现在指示，在代码发布到信标之后，响应上没有Access-Control-Allow-Origin标头。

我是不是遗漏了什么？就在两个月前，这种方法还很有效。只要GAS是为公共访问而发布的，那么它就是设置Access-Control-Allow-Origin标头。

在谷歌应用程序脚本：

代码.gs
function doPost(data){
  if(data){
        //Do Something
  }
  return ContentService.createTextOutput("{status:'okay'}", ContentService.MimeType.JSON);
}

客户端：

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

在调用内容服务脚本时，我总是为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);
}

我因同样的问题损失了几个小时。这个解决方案微不足道。

当您将脚本部署为webapp时，您会得到两个URL：/dev和/exec。您应该使用/execone来进行跨域POST请求。/dev始终是私有的：它需要授权，并且不设置*Allow Origin头。

PS.：/exec似乎被冻结了——它不会反映代码的任何更改，直到您使用新的版本字符串手动部署它（部署对话框中的下拉列表）。要使用/dev URL调试最新版本的脚本，只需安装一个替代浏览器并禁用其网络安全功能（--在GoogleChrome中禁用网络安全）。

只是为了让那些只对像我这样的POST请求感兴趣的人更简单：

function doPost(e){
 //do stuff ...
 var MyResponse = "It Works!";
 return ContentService.createTextOutput(MyResponse).setMimeType(ContentService.MimeType.JAVASCRIPT);
}

我偶然发现了同样的问题：

  • 在localhost上运行网页时，从浏览器调用/exec-url运行良好
  • 从https域调用时引发交叉源错误

我试图避免将POST JSON客户端代码重构为JSONP（我对此持怀疑态度，因为以前总是这样）。

可能的修复#1

幸运的是，在我完成了一个非CORS请求（浏览器中的fetch()来自https域，使用mode: no-cors）之后，通常的CORS请求再次正常工作。

最后的想法

最后一种解释可能是：每一个新的appscript部署都需要一段时间/使用量，然后其配置才能真正稳定在服务器级别。

以下解决方案适用于我的

在谷歌应用程序脚本

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"，它非常重要。如果没有这些，它对我来说就不起作用。

当我试图将应用程序脚本应用程序与另一个Vue应用程序集成时，我遇到了类似的CORS策略错误问题。

请注意以下配置：

  1. 每个部署的项目版本都应为NEW
  2. 以me的身份执行该应用程序，以防您想授予对所有应用程序的访问权限
  3. 任何人都可以访问该应用程序，匿名

希望这对你有用。

在调用应用程序中，只需将内容类型设置为text/plain，就可以将GAS返回的JSON解析为有效的JSON对象。

这是我的谷歌脚本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);

我的情况不同，我以一种非常奇怪的方式面对CORS错误。

我的代码工作正常，没有CORS错误，直到我添加了一个常量：

const MY_CONST = "...";

谷歌应用程序脚本（GAS）似乎不允许使用const关键字，GAS是基于ES3或ES5之前的东西。"const"上的错误重定向到没有CORS的错误页面URL。

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

如果这能帮助到像我这样的人：

我有一个.js文件，其中包含我所有的实用程序函数，包括那些调用GAS的函数。当我去测试更新时，我总是忘记清除缓存，所以我经常会遇到这种错误，因为缓存的代码使用的是/dev/链接，而不是/exec链接。

相关文章：