1

I am receiving the following errors when submiting an HTML form to Google Sheets via Google Apps Script:

Origin https://example.com is not allowed by Access-Control-Allow-Origin.

Fetch API cannot load https://script.google.com/macros/s/…/exec due to access control checks.

Unhandled Promise Rejection: TypeError: Origin https://example.com is not allowed by Access-Control-Allow-Origin.

On the server side, I’ve already set the XFrameOptionsMode.ALLOWALL in order to load the response in an iframe:

return HtmlService.createHtmlOutputFromFile("Index").setXFrameOptionsMode(
  HtmlService.XFrameOptionsMode.ALLOWALL
)

What am I missing?

Here is my form:

document.getElementsByTagName("form")[0].setAttribute("target", "Response")

document.addEventListener("submit", e => {
  const form = e.target
  
  const iframe = Object.assign(document.createElement("iframe"), {
    name: "Response"
  })
 
  document.body.innerHTML = iframe.innerHTML
  
  fetch(form.action, {
    method: form.method,
    body: new FormData(form)
  })
  
  e.preventDefault()
})
<form action=https://script.google.com/macros/s/AKfycbzz-KveHder1A3CX8GcqZI6GR2MQj66PDRWNKoatIET_LXNqQs/exec method=post>  
  <fieldset>
    <legend>Select Foobar</legend>
    <label><input type=checkbox name=Foobar value=Foo>Foo</label>
    <label><input type=checkbox name=Foobar value=Bar>Bar</label>
    <label><input type=checkbox name=Foobar value=Baz>Baz</label>
  </fieldset> 
  <input type=submit value=Submit>
</form>

The form submits to this Google Sheet:

https://docs.google.com/spreadsheets/d/10VHS6bozcdNFYcRskkoONMT8Rt-2CwJ_LJGQWdkTJq4/

The web app is deployed with Me execution privileges and Anyone, even anonymous access.

Marios
  • 26,333
  • 8
  • 32
  • 52
Tzar
  • 5,132
  • 4
  • 23
  • 57
  • 1
    Kindly follow tag guidance : [tag:google-apps-script-web-application] *Questions about web applications must include how the app is published: 1. Execute as"Me"/"User accessing the web-app". 2.Access:" Anyone"/"Anyone even anonymous"* – TheMaster Nov 08 '19 at 22:27
  • 1
    @TheMaster I updated the question. Thanks for the the info. – Tzar Nov 08 '19 at 22:47
  • 1
    I see you already have a answer. IMO, the problem is with `new FormData(form)`. May be if you add `body:URLSearchParams(new FormData(form))` and/or set content type to `application/x-www-form-urlencoded`, the request might not be preflighted – TheMaster Nov 09 '19 at 14:45
  • @TheMaster Could you please expand your comment to a full answer? I would really appreciate it. – Tzar Nov 09 '19 at 14:53
  • 1
    Tested your script. Tanaike is right. https://stackoverflow.com/a/54911076/ It seems any returned content with mimetype `text/html` is blocked by default. My suggestions won't work. – TheMaster Nov 10 '19 at 13:49

1 Answers1

2

How about this answer?

I think that your issue is to return the value of HtmlService.createHtmlOutputFromFile("Index") with the POST method.

As a solution, for example, how about the following modification?

Pattern 1:

In this pattern, the script of server side is modified.

Server side: Google Apps Script

function doPost(e) {

  // do something

  return ContentService.createTextOutput("ok");
}

Note:

  • When you modified the script of Web Apps, please redeploy Web Apps as new version. By this, the latest script is reflected to Web Apps. Please be careful this.

References:

If I misunderstood your question and this was not the direction you want, I apologize.

Tanaike
  • 181,128
  • 11
  • 97
  • 165
  • Tanaike, you’re always here when I’m desperately looking for help. So the problem is with using `fetch`? If I submit the form without any JavaScript, just by targeting the `iframe`, I get the desired response without any errors. – Tzar Nov 09 '19 at 00:04
  • 1
    @Tzar Thank you for replying. I think that it's yes. I could also confirm about it. It seems that when `fetch` is used, `return HtmlService` occurs such issue. – Tanaike Nov 09 '19 at 00:09
  • Sensei, could you please help with this one: https://stackoverflow.com/q/58847181/7840155 – Tzar Nov 13 '19 at 23:52
  • 1
    @Tzar Thank you for replying. I saw it. But unfortunately, I cannot understand about your goal. So I cannot think of the solution yet. I apologize for my poor English skill. When I could understand about it, I would like to think of it. On the other hand, an answer has already been posted, I think that it will resolve your issue. – Tanaike Nov 14 '19 at 00:38