CODEWITHSUNDEEP
angulargoogle-apps-scriptxmlhttprequestcors
Mike Warren
Mike Warren

Reputation: 3866

Sending POST requests to a Google Apps Script

This was working.

I was able to create an endpoint, via Google Apps Script, that allow end user to POST a message to me (or another contact), and would also POST copy of that message to them.

The code for the POST request was something like:

function doPost(e) { 
  var response;
  try {
    response = sendContactEmail(e.postData.contents);
  }
  catch (error) { 
    throw JSON.stringify(error, null, '\t');
  }
    return ContentService
      .createTextOutput(JSON.stringify(response))
      .setMimeType(ContentService.MimeType.JSON)
}

Now, when I tried it, I face issue. When I tried it from my Angular site, with service code like :

@Injectable()
export class ContactService implements SenderService {
  constructor(private http: HttpClient) {}

  send(message: EmailMessage): Observable<any> {
    return this.http.post<any>(
      "https://script.google.com/macros/s/AKfycbyEuvROpXUEi4wTX4N06nqF6oHlwihVc9Ut6-OG04zPi5yuOCzn/exec",
      JSON.stringify({ data: message }),
      {
        headers: {
          "Access-Control-Allow-Origin": "*",
        },
      }
    );
  }
}

it doesn't work, and I face issue like

Access to XMLHttpRequest at 'https://script.google.com/macros/s/AKfycbyEuvROpXUEi4wTX4N06nqF6oHlwihVc9Ut6-OG04zPi5yuOCzn/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.

In attempt at debugging this issue, I whip open Postman, make the request, only to get back the following HTML response:

<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="//ssl.gstatic.com/docs/script/images/favicon.ico">
    <title>Error</title>
    <style type="text/css">
        body {
            background-color: #fff;
            margin: 0;
            padding: 0;
        }

        .errorMessage {
            font-family: Arial, sans-serif;
            font-size: 12pt;
            font-weight: bold;
            line-height: 150%;
            padding-top: 25px;
        }
    </style>
</head>

<body style="margin:20px">
    <div><img alt="Google Apps Script" src="//ssl.gstatic.com/docs/script/images/logo.png"></div>
        <div style="text-align:center;font-family:monospace;margin:50px auto 0;max-width:600px">Authorization is
            required to perform that action.</div>
</body>

</html>

I don't know that much about using Google Apps Script as a backend.

Should I set up OAuth token for this type of stuff, and if so, how? Else, what should I do about this issue?

Right now, there is no backend, other than my legacy Google Apps Script.

Upvotes: 0

Views: 5025

Answers (1)

Tanaike
Tanaike

Reputation: 201358

In this case, how about using "Content-Type": "text/plain" instead of "Access-Control-Allow-Origin": "*" as follows?

From:

headers: {
  "Access-Control-Allow-Origin": "*",
},

To:

headers: {
  "Content-Type": "text/plain"
},

Note:

  • In this case, it supposes that doPost(e) of your Google Apps Script side works fine. When the your Google Apps Script occurs an error, the error might not be able to be removed. Please be careful this.

References:

Upvotes: 1

Related Questions