如何解决阻止来自我的 Google Apps 脚本的 AJAX 请求资源的“MIME 类型不匹配错误”？答案

【问题标题】：How do I resolve a 'MIME type mismatch error' blocking an AJAX-requested resource from my Google Apps Script?如何解决阻止来自我的 Google Apps 脚本的 AJAX 请求资源的“MIME 类型不匹配错误”？
【发布时间】：2020-11-01 12:20:21
【问题描述】：

我正在尝试使用 Jquery.ajax 而不是 fetch 来实现代码 here。

我在进行 AJAX 调用时收到以下错误：

The resource from “https://script.googleusercontent.com/macros/echo?...” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).

Google Apps 脚本可以很好地与 cURL 配合使用，所以我怀疑我的（非常简单的）GApps 脚本和我的客户端脚本之间存在一些分歧。

这是 GApps 脚本：

function doGet(e) {
  const id = e.parameter.spreadsheetId;
  const sheetName = e.parameter.sheetName;
  const sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
  const values = sheet.getDataRange().getValues();
  return ContentService.createTextOutput(JSON.stringify({values: values})).setMimeType(ContentService.MimeType.JAVASCRIPT);
}

注意：我尝试将最后一行的MimeType 更改为JSON，但没有成功。

这是我在客户端脚本中调用的 AJAX 设置：

var settings = {
    'cache': false,
    'dataType': "jsonp",
    'async': true,
    'crossDomain': true,
    'url': url,
    'method': 'GET',
    'headers': {
        'accept': 'application/json',
        'Access-Control-Allow-Origin': '*'
    }
};

我正在使用 Firefox。 Chrome 中会引发类似的错误。我该如何解决这个问题？

【问题讨论】：

jsonp 是一个脚本请求，不接受任何请求标头。不知道为什么你选择了 jsonp，它不再使用了。示例中的 fetch() 期望 json 而不是 jsonp。 Access-Control 标头也不是请求标头，它们必须设置在服务器端
感谢您的澄清。对于我想要完成的事情，没有多少明确的答案。我采取了一种厨房水槽的方法来解决我的浏览器给我的 CORS 错误。
@charlietfl 回顾我的笔记，this answer 是我最初的剧本的灵感来源。在这一点上它是学术性的，但你知道为什么它对他们有用而不对我有用吗？

标签： javascript jquery ajax google-apps-script web-applications

【解决方案1】：

我相信你的目标如下。

您希望使用 jQuery.ajax() 而不是 fetch 向 Web 应用发出请求。

为此，当你的settings被修改时，下面的修改呢？

修改脚本：

var settings = {
  'url': url,
  'method': 'GET',
  'dataType':"json",
  'data': {spreadsheetId: "###SpreadsheetId###", sheetName: "###SheetName###"},
};

示例脚本：

var url = 'https://script.google.com/macros/s/###/exec';
var settings = {
  'url': url,
  'method': 'GET',
  'dataType':"json",
  'data': {spreadsheetId: "###SpreadsheetId###", sheetName: "###SheetName###"},
};
$.ajax(settings).done(res => {
  console.log(res.values);  // By this, you can retrieve the values of `{values: values}` from Web Apps.
}).fail(err => console.log(err));

注意：

当您修改了 Web Apps 的 Google Apps 脚本时，请将 Web Apps 重新部署为新版本。这样，最新的脚本就会反映到 Web 应用程序中。请注意这一点。
在上述修改后的脚本中，可以使用您的 Google Apps 脚本。
在这种情况下，我可以确认上述脚本适用于 Chrome。

参考：

jQuery.ajax()

【讨论】：