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
I think I fixed it already, what I did:
Set origin to '*', so it will work in playground AND gmail.
res.set('Access-Control-Allow-Origin', '*');
Gmail don't accept svg image, but it will work in the Playground.