![]() I added it to my HTACCESS file, and lo-and-behold, the carousel showed up and started working. This is important, because in order for the browser / AMP playground to be able to read back the non-standard AMP-Access-Control-Allow-Source-Origin, it needs to be explicitly exposed through that header. It took me longer than I would like to admit, but after staring at the documentation again, this time at the readme for the full list of CORs headers for AMP, not just for email, I finally realized I was missing one additional header: “access-control-expose-headers”. This made even less sense when looking closely at the network request – my response header exactly matched the _amp_source_origin request parameter! However, even though I could see that my JSON fetch now returned the right headers, such as “amp-access-control-allow-source-origin”, I was still getting a very specific error: “The amp-access-control-allow-source-origin must be equal to the amp source origin sent in the request.” I followed the recommendations given by Google from the first link, and updated the email template with the new source. I quickly uploaded the JSON source for my list to a special subfolder on my server, and added an HTACCESS file for that directory so I could play around with adding the correct headers. Here is a more complete list of security headers that your server should send back in response to AMP resource requests.Here are the recommended headers for use with the AMP Email Playground.Opening up the browser dev tools, it was pretty easy to spot that this had to with security issues – the JSON src of the list was fetched just fine (200 status), but the Playground was refusing to parse and show it due to a bunch of missing CORs header.Ī quick search got me what I was was looking for – the AMP for Email specification does indeed require special security related headers for remote JSON sources that are fetched for elements: More specifically, it was not showing up in the “Gmail AMP for Email Playground” tool – where the slide carousel should have appeared, there was just empty blank space. I recently ran into the issue of an carousel not working inside an AMP email template. var multer = require ( 'multer' ) var multipart = multer ( ) Īpp. This is a really simple, it just takes in a text value and then sends it right back. I’m already using multer on my site so here’s a quick example of how to use it in a post request. ![]() ![]() They recommend using busboy, multiparty, formidable, or multer. I’d assumed amp-form would send data using the default application/x-However, the data is actually sent using multipart/form-data which body-parser doesn’t handle so another module is needed to get it working. I followed the AMP by Example code, my page passed validation, but whenever I tried to use the form data all I got was an empty req.body.įinding a solution took more effort than the usual reading through the first few Stack Overflow results, so I thought it might be useful for anyone else out there struggling. I’m in the middle of creating Google AMP pages for my fonts and everything was going pretty well until I tried getting the amp-form component working with Node.js. So keep that in mind while reading the original post… setHeader ( 'AMP-Access-Control-Allow-Source-Origin', req. setHeader ( 'Access-Control-Allow-Origin', req. Most of the information below is still applicable but I’ve updated the Access-Control-Allow-Origin and AMP-Access-Control-Allow-Source-Origin settings to: res. UPDATE 11/14/19: At some point in the years since I originally posted this, Google made some improvements to the way AMP handles URLs and I’ve updated my headers to keep up.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |