没有“访问控制允许来源”

Question

我正在向 Cloudfront CDN 请求图像。每次我从客户端发出请求时都会收到此错误：

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

我在服务器上使用 express 并添加了以下内容以允许访问但仍然没有运气..

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 在直接访问时有效，但如果我从本地主机或它自己的网站发出请求，则无效。

Answer 1

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

仅供参考，您在访问图像时遇到 CORS 错误似乎很奇怪。如果使用<img>标签进行访问，那么<img>标签将不受同源限制。相同的来源限制适用于从浏览器 Javascript 进行的 Ajax 调用。

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

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