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;
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With