node.jsemailcorsamp-email

AMP Email | CORS Headers issue? Works in playground not in Gmail


I try to send an AMP Email using the playground. The AMP Email itself works fine, tested on localhost and runs in an Azure environment. Build in Node/TypeScript. Even in the AMP playground it runs, with the following CORS headers:

res.set('Access-Control-Allow-Origin', 'https://amp.gmail.dev');
res.set('AMP-Access-Control-Allow-Source-Origin', 'amp@gmail.dev');
res.set('Access-Control-Expose-Headers', 'AMP-Access-Control-Allow-Source-Origin');

As soon as I send the 'GET' request from the form, it will not show anything. The error I will receive in the network tab of Chrome:

HTTP/1.1 400 Bad Request
Vary: Origin
Vary: X-Origin
Vary: Referer
Content-Type: application/json+protobuf; charset=UTF-8
{"1":9,"2":"Access-Control-Allow-Origin header value must be one of the acceptable values."}
--batch_eLkTuK4rnSAoy6L5ZSMGCkUK8R4_Ih_c--

What I've already tried: Allow AMP Email in developer settings of Gmail > OK (I do see the email, but after submitting the form it will throw me the errror in network tab)

Change 'Access-Control-Allow-Origin' to 'https://mail.google.com' > OK, this looks like it gave me the JSON back I want. The error of 400 bad request is gone and it shows:

 HTTP/1.1 200 OK
 Content-Type: application/json+protobuf; charset=UTF-8
 Vary: Origin
 Vary: X-Origin
 Vary: Referer

{"3":{"1":3},"4":"{\"body\":\"{\\\"items\\\":[{\\\"cards\\\":[ the content I want. 

But the e-mail itself won't load anything? To be clear, the error never shows up in the e-mail itself. Just in the network tab of Chrome.

Edit: The console will give me the following error(s) after submitting the form in gmail:

[amp-form] Form submission failed: Error: Request viewerRenderTemplate failed
Server side html response must be defined
Uncaught (in promise) Error: Server side html response must be defined​​​

Solution

  • I think I fixed it already, what I did:

    1. Set origin to '*', so it will work in playground AND gmail.

      res.set('Access-Control-Allow-Origin', '*');
      
    2. Gmail don't accept svg image, but it will work in the Playground.

    3. Gmail don't accept any spaces in image url, so you'll have to use %20.