更新

Question

我正在从Cloudfront CDN请求图片。每当我向客户提出请求时，我都会收到此错误：

从原点https://cdn.mywebsite/image.png访问图像 http://localhost:5000已被CORS政策阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源http://localhost:5000 访问。响应的HTTP状态代码为403。

我正在使用express for the server并添加了以下内容以允许Access但仍然没有运气..

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', "*");
    res.setHeader('Access-Control-Allow-Methods', 'GET');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    next();
})

任何建议都将非常感谢！

=============================================== ===========================

更新

你好@jfriend00

所以我的目标是通过CF CDN提供受保护的内容。

为此，我使用以下模块向客户发送签名的Cookie。

var cf = require('aws-cloudfront-sign')
var options = {keypairId: 'keypairId', privateKeyPath: '/foo/bar'}
var signedCookies = cf.getSignedCookies('https://cdn.mywebsite.com/*', options);

for(var cookieId in signedCookies) {
 res.cookie(cookieId, signedCookies[cookieId]);
}

然后我只是从客户端向cdn发出请求以获取图像： <img src="https://cdn.mywebsite.com/image.png" crossorigin="anonymous" alt="test picture">

此时，控制台中会显示Access-Control-Allow-Origin错误。

注意：

var signedUrl = cf.getSignedUrl('https://cdn.mywebsite.com/image.png', options)

这个signedUrl在直接访问它时有效，但如果我从localhost或自己的网站发出请求则不行。

Answer 1

CORS标头必须位于为资源提供服务的服务器上。因此，如果您获得CORS错误的资源是https://cdn.mywebsite/image.png，那么该主机必须允许CORS访问。您可以通过localhost上的CORS来解决这个问题。

仅供参考，访问图像时出现CORS错误似乎很奇怪。如果您使用<img>标记进行访问，则<img>标记不会受到相同的原始限制。相同的原始限制适用于从浏览器Javascript进行的Ajax调用。

我也不是说您在同一页面中混合了http和https，这也会导致问题。

您是否尝试使用Ajax下载图像？请显示导致此错误的客户端代码并说明您要完成的工作，也许我们可以提供不同的解决方案。

没有'Access-Control-Allow-Origin'

更新

1 个答案: