我有一个页面,该页面使用amp-list
使用JSON文件动态列出产品。我的目录结构如下:*root*/amp/product-name/
,然后在product-name
目录中,我有一个带有AMP HTML的index.html
和一个products.json
,其中包含我显示的产品数据在页面上。如果我直接访问页面,一切都会按预期进行:
https://example.com/amp/product-name/
当我从ampproject.org CDN访问时出现了问题。
这是实际页面,如果您访问控制台,则会看到CORS错误。我该如何处理?关于如何精确处理的文档尚不清楚,只是一个非常模糊的概述,所以对于新手来说,这对我来说没有意义,我不能直觉如何做到。我知道我需要某种类型的请求处理程序,这是我从AMP自己的app.js中复制代码(它们链接到其文档中)复制而成的。在amp-list
元素中,我之前的src直接指向JSON文件,但是现在我看到我需要指向一个处理程序(例如JS文件),然后让该处理程序设置请求标头和然后输出正确的JSON。
这是我对请求处理程序的要求:
/**
* @param {string} url
* @param {string} param
* @param {*} value
* @return {string}
*/
function addQueryParam(url, param, value) {
const paramValue = encodeURIComponent(param) + '=' + encodeURIComponent(value);
if (!url.includes('?')) {
url += '?' + paramValue;
} else {
url += '&' + paramValue;
}
return url;
}
function enableCors(req, res, origin, opt_exposeHeaders) {
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader('Access-Control-Allow-Origin', origin);
res.setHeader('Access-Control-Allow-Origin', 'https://www-perfectimprints-com.cdn.ampproject.org');
res.setHeader('Access-Control-Expose-Headers', ['AMP-Access-Control-Allow-Source-Origin'].concat(opt_exposeHeaders || []).join(', '));
if (req.query.__amp_source_origin) {
res.setHeader('AMP-Access-Control-Allow-Source-Origin', req.query.__amp_source_origin);
}
}
function assertCors(req, res, opt_validMethods, opt_exposeHeaders, opt_ignoreMissingSourceOrigin) {
// Allow disable CORS check (iframe fixtures have origin 'about:srcdoc').
if (req.query.cors == '0') {
return;
}
const validMethods = opt_validMethods || ['GET', 'POST', 'OPTIONS'];
const invalidMethod = req.method + ' method is not allowed. Use POST.';
const invalidOrigin = 'Origin header is invalid.';
const invalidSourceOrigin = '__amp_source_origin parameter is invalid.';
const unauthorized = 'Unauthorized Request';
let origin;
if (validMethods.indexOf(req.method) == -1) {
res.statusCode = 405;
res.end(JSON.stringify({
message: invalidMethod
}));
throw invalidMethod;
}
if (req.headers.origin) {
origin = req.headers.origin;
if (!ORIGIN_REGEX.test(req.headers.origin)) {
res.statusCode = 500;
res.end(JSON.stringify({
message: invalidOrigin
}));
throw invalidOrigin;
}
if (!opt_ignoreMissingSourceOrigin && !SOURCE_ORIGIN_REGEX.test(req.query.__amp_source_origin)) {
res.statusCode = 500;
res.end(JSON.stringify({
message: invalidSourceOrigin
}));
throw invalidSourceOrigin;
}
} else if (req.headers['amp-same-origin'] == 'true') {
origin = getUrlPrefix(req);
} else {
res.statusCode = 401;
res.end(JSON.stringify({
message: unauthorized
}));
throw unauthorized;
}
enableCors(req, res, origin, opt_exposeHeaders);
}
这是我用于HTML的内容。
<amp-list credentials="include" width="auto" height="1500" layout="fixed-height" src="https://perfectimprints.com/amp/handle-amp-requests.js" class="m1">
<template type="amp-mustache" id="amp-template-id">
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="{{ link }}">
<amp-img alt="{{ title }}" width="1000" height="1000" src="{{ src }}" layout="responsive"></amp-img>
<h3 class="product-name text-centered">
{{title}}
</h3>
<h4 class="text-centered sku margin-minus-1">{{ sku }}</h4>
<div class="text-centered get-price">
<a class="text-centered get-price-link" href="{{ link }}">Get pricing now</a>
</div>
</a>
</div>
</template>
<div overflow role="button" aria-label="Show more">
Show more
</div>
</amp-list>
答案 0 :(得分:1)
假设您使用的是Apache服务器,则可以这样在htaccess文件中设置CORS标头:
Header set Access-Control-Allow-Origin "https://www-perfectimprints-com.cdn.ampproject.org"
Header set Access-Control-Allow-Origin "https://www-perfectimprints-com.amp.cloudflare.com"
然后确保将您的htaccess文件上传到包含您的网站HTML的目录中。这样便可以在我管理的网站上进行设置,一切对我们都有效。
答案 1 :(得分:1)
这是对我有用的解决方案。
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Origin "https://example-com.cdn.ampproject.org"
Header set Access-Control-Allow-Source-Origin "https://example.com"
Header set Access-Control-Expose-Headers AMP-Access-Control-Allow-Source-Origin
Header set AMP-Access-Control-Allow-Source-Origin "https://example.com"
谢谢@Craig Scott的提示来帮助我解决问题。
是处理AMP页面的可怜,缺乏经验的灵魂。