0

I am trying to implement the code here with Jquery.ajax rather than fetch.

I get the following error when I make the AJAX call:

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

The Google Apps Script works fine with cURL, so I suspect it's some disagreement between my (very simple) GApps script and my client script.

Here is the GApps script:

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);
}

Note: I have tried changing the MimeType on the last line to JSON with no success.

Here are my AJAX settings for the call in the client script:

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

I'm working in Firefox. A similar error is thrown in Chrome. How can I resolve this?

TheMaster
  • 45,448
  • 6
  • 62
  • 85
K1nesthesia
  • 147
  • 1
  • 3
  • 11
  • 1
    jsonp is a script request and accepts no request headers. Not sure why you have chosen jsonp, it's not used much any more. The `fetch()` in example is expecting json not jsonp. Access-Control headers are not a request header either, they must be set server side – charlietfl Jul 12 '20 at 03:04
  • Thank you for clarifying. There aren't many clear answers around for what I want to accomplish. I was taking something of a kitchen-sink approach to get around the CORS error that my browser was giving me. – K1nesthesia Jul 15 '20 at 01:06
  • @charlietfl Looking back at my notes, [this answer](https://stackoverflow.com/a/49813910/3604787) was what informed my original script. It's academic at this point, but any idea why it would have worked for them and not for me? – K1nesthesia Jul 16 '20 at 00:46

1 Answers1

2

I believe your goal as follows.

  • You want to request to the Web Apps using jQuery.ajax() instead of fetch.

For this, when your settings is modified, how about the following modification?

Modified script:

var settings = {
  'url': url,
  'method': 'GET',
  'dataType':"json",
  'data': {spreadsheetId: "###SpreadsheetId###", sheetName: "###SheetName###"},
};
Sample script:
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));

Note:

  • When you modified the Google Apps Script of Web Apps, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Please be careful this.
  • In above modified script, your Google Apps Script could be used.
  • In this case, I could confirm that the above script worked with Chrome.

Reference:

Tanaike
  • 181,128
  • 11
  • 97
  • 165