没有 'Access-Control-Allow-Origin'

Question

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

Access to Image at https://cdn.mywebsite/image.png from origin http://localhost:5000 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://localhost:5000 is therefore not allowed access. The response had HTTP status code 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 headers 必须在提供资源的服务器上。因此，如果您收到 CORS 错误的资源是 https://cdn.mywebsite/image.png，则该主机必须允许 CORS 访问。您不能通过在 localhost.

上允许 CORS 来解决这个问题

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

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

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

没有 'Access-Control-Allow-Origin'

No 'Access-Control-Allow-Origin'

node.js

express

cors

cdn

amazon-cloudfront

更新