Amphtml: No 'Access-Control-Allow-Origin' header

[ankit4794]

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://cdn.ampproject.org' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

i added "
Header set Access-Control-Allow-Origin https://cdn.ampproject.org
Header set Access-Control-Allow-Credentials true
"
in my magento root .htaccess file..

but still not working.

can i know how to solve this?

[bjalford]

There is documenation here: https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md#cors-security-in-amp

Looks like you need to set Access-Control-Allow-Origin to your domain.

[ankit4794]

i tried to add it in .htaccess but still its not working..

can you tell me another way to add it with similar source code or example?

[aghassemi]

@ankit4794 I recommend inspecting the response returned from your form endpoint and checking what headers are actually being returned.

AmpByExample publishes their server-side code used their examples ( written in Go server ). You can look at the headers they set to enable CORS in this code: https://github.com/ampproject/amp-by-example/blob/d4b2c491370cc04427c3206de22c1174780f5709/backend/request.go

[jpettitt]

Since there is more than one amp cdn you really need to check and echo back the origin that the browser sent. Hard coding cdn.ampproject.org won't work.

[jalajc]

@ankit4794 In my case its working fine. Is it possible for you to attach some screenshot of network tab on chrome (masking sensitive information). May be you want to raise on Stackoverflow too.

Couple of points:.

1. Your situation might require additional headers as per AMP-CORS Security Spec

AMP-Access-Control-Allow-Source-Origin: source-origin. Here "source-origin" indicates the source origin that is allowed to read the authorization response as was verified via "__amp_source_origin" URL parameter. Ex: "https://publisher1.com".
Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin. This header simply allows CORS response to contain the "AMP-Access-Control-Allow-Source-Origin" header.

Your response headers then will include following headers:

access-control-allow-credentials: true
access-control-allow-origin: https://publisher1-com.cdn.ampproject.org
access-control-expose-headers: AMP-Access-Control-Allow-Source-Origin
amp-access-control-allow-source-origin: https://publisher1.com

1. For one time test, simply output the entire HTTP request variable(good if you have dummy environment). In magento (php) you can do it by echo json_encode($_SERVER); Check this output in your network tab. - Make sure the json dump has all HTTP variables required to satisfy AMP-CORS Security Spec.
   _PS: For Apache Origin header could be HTTP_ORIGIN and AMP-Same-Origin could be HTTP_AMP_SAME_ORIGIN_

2. As @jpettitt mentioned there are more than one CDNs links. You need to set header on everything satisfying *.ampproject.org and other valid AMP request origins, viz.: *.amp.cloudflare.com, your own source-origin ->{{ if directly accessed request origin~source-origin}} or any other added in future given you want to allow.
   _PS: Adding all that in .htaccess is difficult and differ based on Apache versions._

3. Because there are couple of conditional checks I recommend you to set headers in your code (php or whatever you use) instead of hardcoding at Webserver (Apache/.htaccess). This allows for additional security check you might want to do such as echo Origin (/reverse DNS) or AUTHDATA(token) validation access-url-variables

[jalajc]

@aghassemi I think AMP-CORS Security Spec requires bit of lucidness. Let me see if over weekends I can create some flow charts to include there.

[bjalford]

Wondering whether the docs would be better not to reference the amp domain (https://cdn.ampproject.org) as an example and use something like https://publisher1.com ?

[jpettitt]

@jalajc not just *.ampproject.org *.amp.cloudflare.com and soon *.relayamp.com (+more as cloudflare adds other customer cdn's)

[jalajc]

@jpettitt certainly as listed in AMP CORS spec too. It was for sake of example here. Thanks for pointing out though, Updated my comment to avoid any confusion.

[aghassemi]

Thanks all for helping with the question.