How do i allow a CORS requests in my google script?

Question

I want to post my contact form to my google script that will send an e-mail to me. I use the following code:

var TO_ADDRESS = "[email protected]"; // where to send form data

function doPost(e) {

  var callback = e.parameter.callback;

  try {
    Logger.log(e); // the Google Script version of console.log
    MailApp.sendEmail(TO_ADDRESS, "Contact Form Submitted",
                      JSON.stringify(e.parameters));
    // return json success results
    return ContentService
          .createTextOutput(callback+
          JSON.stringify({"result":"success",
                          "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(callback+JSON.stringify({"result":"error", 
          "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}

When i try to post to the google script url, i get the following error:

Access to XMLHttpRequest at 'https://script.google.com/macros/s/~~myscriptid~~/exec' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have no clue how to add the CORS-filter to my google script.

I know the script is working i have tested it with this plugin:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Answer 1

Late answer, but totally working...

To pass data from appscripts to another website, just use mime type JAVASCRIPT on appscripts side, like so:

doGet(e){   
 return ContentService
  .createTextOutput(e.parameter.callback + "(" + JSON.stringify(YOUR OBJECT DATA HERE)+ ")")
  .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

And on the front end access it as:

<script>
var url = "https://script.google.com/macros/s/AKfy*****ACeR/exec?callback=loadData";
// Make an AJAX call to Google Script
jQuery.ajax({
crossDomain: true,
url: url,
method: "GET",
dataType: "jsonp"
});

 // log the returned data
  function loadData(e) {
  console.log(e);
  }
</script>

This works without any CROB/ CROS headache

Answer 2

After several hours of research I have these results related to how consume a google app script published as http public service with a deployed url like:

https://script.google.com/a/utec.edu.pe/macros/s/AKfy\*\*\*\*\*\*eo/exec

In the backend

You could consume POST and GET without any problems with any language: java, nodejs, python, php, c#, go , etc

In the frontend (js in the browser)

I was not able to consume the POST method. I tried with jsonp and other crazy attempts and the error was the same:

Cross-Origin Request Blocked: The Same Origin Policy disallows 
reading the remote resource at         
https://script.google.com/a/utec.edu.pe/macros/s/AKfy***A4B***eo/exec?foo=bar 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

CORS errors

Are very common and simple to control with a few lines in the server if the server were us, but since we don't have control over the server(google), no configuration works.

GET Method

Only GET method worked for me with these two ways:

• $.getJSON

$.getJSON('https://script.google.com/a/acme.org/macros/s/AKfy***A4B***eo/exec?foo=bar', function(result) {
  console.log(result);
});

• XMLHttpRequest

var xmlhttp = new XMLHttpRequest();
var theUrl = "https://script.google.com/a/acme.org/macros/s/AKfy***A4B***eo/exec?foo=bar";
xmlhttp.open("GET", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send();

More details here: https://gist.github.com/jrichardsz/14e09d8ae322f2d9aabb93cfaa014679