Empty amp-list when served from Google

Question

We are having a problem with our AMP website when cached and served from Google.

The problem is: amp-list is empty, not populated.

Please see by yourselves:

1. visit https://m.graphiccompetitions.com/ (this is our mobile/amp version. You'll see everything works fine)

2. now please go on your mobile and search (on google) "graphic competitions". Our website is the first on the search results. You'll see the AMP logo beside our URL.

3. Tap the search result. Instantly Google will serve you our AMP website. But... it's empty!!! No articles are showed.

The same behaviour also appears when you search for example "illustration contests". Google will serve you our AMP version (https://m.graphiccompetitions.com/illustration), but, again, empty.

Why??

Our amp-list has an src pointing to a .json file. Is this a problem?

Again, everything works fine if you access the website directly (e.g. inserting its URL). But when (on mobile) it is served directly from Google, the amp-list is never populated.

Why???

Any idea or suggestion? ????

Answer 1

If you view this page from the AMP cache you can see it's due to an incompatible CORS policy: https://m-graphiccompetitions-com.cdn.ampproject.org/c/s/m.graphiccompetitions.com

The error you're getting is this (I pulled this from the browser console)

Access to fetch at 'https://m.graphiccompetitions.com/api/category_all.json?20181130&__amp_source_origin=https%3A%2F%2Fm.graphiccompetitions.com' from origin 'https://m-graphiccompetitions-com.cdn.ampproject.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

When Google caches the page those internal requests are now technically cross-origin and no longer internal to your own server. You can see in the error it's failing to fetch from cdn.ampproject.org, you'll need to setup your CORS policy so Google can access the content.

You can learn more about how to introduce a policy that will work with AMP here.

Answer 2

Thanks to James who pointed us in the right direction. Here is the solution we found, using directly .htaccess (as our amp-list is pointing directly to a pre-compiled json file, for maximum speed, so no chance of using php to set-up headers)

<FilesMatch "\.(json)$" >
  Header set Access-Control-Allow-Credentials "true"
  Header set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Methods "GET"
  Header set Access-Control-Allow-Source-Origin "https://m.graphiccompetitions.com"
  Header set Access-Control-Expose-Headers AMP-Access-Control-Allow-Source-Origin
  Header set AMP-Access-Control-Allow-Source-Origin "https://m.graphiccompetitions.com"
  Header set Access-Control-Max-Age: 43200
  Header set Cache-Control "private, no-cache"
</FilesMatch>

The line Access-Control-Allow-Origin "*" might not be ideal, and we could use

Header always append Access-Control-Allow-Origin: "m-graphiccompetitions-com.cdn.ampproject.org"
Header always append Access-Control-Allow-Origin: "m-graphiccompetitions-com.cdn.cloudflare.com"
(and so on...)

But for the time being a simple asterisk will do (and we have set Access-Control-Allow-Methods to GET only, anyway).

And now everything works! When Google serves its cached version, the amp-list is now correctly populated. 👍

Hope this helps someone else!