AMP Access Control Allow Source Origin header Issue

Question

How can I resolve the error below;

Failed to load resource: the server responded with a status of 500 (Internal Server Error) cdn.ampproject.org/v0.js:68 Response must contain the AMP-Access-Control-Allow-Source-Origin header Yd @ cdn.ampproject.org/v0.js:68 cdn.ampproject.org/v0.js:68 Form submission failed: Error: Response must contain the AMP-Access-Control-Allow-Source-Origin header​​​ reported

Followed all instructions at the AMP GitHub Page on CORS.

Below is a screenshot of my PHP code at the server side and error in the console of my browser;

Magnetoelectricity

For .htaccess solutions, please try wpza.net/accelerated-mobile-pages/… – Smudge

Answer 1

Please try with following code

if(!empty($_POST)){
        $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
        header("Content-type: application/json");
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://example.com') .".cdn.ampproject.org");
        header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
        header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
        header("AMP-Redirect-To: https://example.com/thankyou.amp.html");
        header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin"); 
        echo json_encode(array('successmsg'=>'data post'));
        exit;
}

Please make sure that domain url should be https

Replace https://example.com/ to your desired url

Contempt

There some changes made in IIS server. Thanks for your support. – Magnetoelectricity

is it really required to use https? – Zamindar

Answer 2

Although OP uses PHP, I'm posting here for my javascript peeps.

For node express server, you can use amp-toolbox-cors, which provides middleware.

const express = require('express');
const ampCors = require('amp-toolbox-cors');

const app = express();

// That's it!
app.use(ampCors());
...

By default, the AMP CORS middleware will only allow requests from AMP Caches listed on https://cdn.ampproject.org/caches.json (with the addition of bing-amp.com).

All other origins will receive a 403 response.

So for localhost or dev testing, you guys will probably want to also add the following:

app.use(ampCors({
  verifyOrigin: false
}));

For those who want to take a deeper dive, here's a link to offical docs on how to comply with AMP CORS.

Superstition

Answer 3

This may save a head ache or two. I went round in circles quite a while;

Be aware in the recognized answer above that if https://example.com happens to be a domain name with hyphens in it, the string replacement will not give the desired result.

For example https://www.my-domain.com needs to be turned into https://www-my--domain-com and it won't be.

header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://www.my-domain.com') .".cdn.ampproject.org");

Needs to be

header("Access-Control-Allow-Origin: https://www-my--domain.com.cdn.ampproject.org");

So

$h = 'https://www.my-domain.com';
$h = str_replace('-', '--',$h);
$h = str_replace('.', '-',$h).'.cdn.ampproject.org';

then

header("Access-Control-Allow-Origin: " . $h);

Ricercare