set http headers in google apps script

Question

I was making a web app using google apps script, and I have been getting errors like this:

Access to CSS stylesheet at 'https://script.google.com/.../exec?url=style.css' from origin 'https://...-script.googleusercontent.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Access to script at 'https://script.google.com/.../exec?url=script.js' from origin 'https://...-script.googleusercontent.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

how would I add an Access-Control-Allow-Origin header?

function doGet(e){
  var t,r;
//...
  if(t=='text/html'||t=='text/x-server-parsed-html'){return HtmlService.createHtmlOutput(r);}
  r=ContentService.createTextOutput(r);
  r.setMimeType(ContentService.MimeType.TEXT);
  if(/[^\/]+?\/([^.]+?\.)?([^+]+?\+)?xml/.test(t)){r.setMimeType(ContentService.MimeType.XML);}
  if(t=='application/atom+xml'){r.setMimeType(ContentService.MimeType.ATOM);}
  if(t=='text/csv'){r.setMimeType(ContentService.MimeType.CSV);}
  if(t=='text/calendar'){r.setMimeType(ContentService.MimeType.ICAL);}
  if(t=='application/javascript'||t=='text/javascript'){r.setMimeType(ContentService.MimeType.JAVASCRIPT);}
  if(t=='application/json'){r.setMimeType(ContentService.MimeType.JSON);}
  if(t=='application/rss+xml'){r.setMimeType(ContentService.MimeType.RSS);}
  if(t=='text/vcard'){r.setMimeType(ContentService.MimeType.VCARD);}
  if(e.parameter.name){r.downloadAsFile(e.parameter.name)}
  return r;
}

You can't. Use simple requests that doesn't need to be preflighted. — TheMaster
– TheMaster, Commented Jan 10, 2020 at 23:07

carlesgg97 · Accepted Answer · 2020-01-13 08:53:55Z

You cannot modify the CORS headers in a Google Apps Script webapp. This is done by Google to ensure the security of their users.

I see, however, that you are attempting to fetch files such as style.css or script.js. If this is the case - and you are using the "classic" HTML tags for including them (such as <link rel="stylesheet" ... and <script src=... I suggest you do the following instead:

Replace the style.css file for a style.html HTML file, the contents of which should be as follows:
```
<style>
...
</style>
```
Where the ... should be your CSS code.
Replace the script.js file for a script.html HTML file, the contents of which should be:
```
<script>
...
</script>
```
Where ... should be your script code.
Include the newly create files above in your main HTML by using scriptlets (see the example below). Find the location of your HTML file in which you want to inject the code, and use the following tags, as appropriate, to do so:
```
<?!= include('style'); ?>
```
```
<?!= include('script'); ?>
```

Example

Code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

Stylesheet.html

<style>
p {
  color: green;
}
</style>

JavaScript.html

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

References

Google Apps Script best practices

Collectives™ on Stack Overflow

set http headers in google apps script

1 Answer 1

Example

References

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Example

References

Comments

Your Answer

Sign up or log in

Post as a guest

Related