如何预防ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep？

Question

我正在尝试通过 React 应用程序访问我的电影 API returns 数据，包括电影海报的图像。此图像是从外部网站请求的。每次我向我的 \movies 端点发出请求时，图像都被阻止并且我在控制台中收到以下消息

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

在“网络”选项卡中查看请求时，我收到以下消息说要启用 Cross-Origin 资源策略

Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each resource must specify a suitable Cross-Origin Resource Policy (CORP). This behavior prevents a document from loading cross-origin resources which don’t explicitly grant permission to be loaded.
To solve this, add the following to the resource’s response header:
Cross-Origin-Resource-Policy: same-site if the resource and your site are served from the same site.
Cross-Origin-Resource-Policy: cross-origin if the resource is served from another location than your website. ⚠️If you set this header, any website can embed this resource.

我正在使用 CORS npm 模块，该模块以前曾用于解决我的问题并出现 Access-Control-Allow-Origin 错误。我添加了一些额外的中间件来尝试按照说明添加 header 。这是具有该代码的 app.js 服务器

App.js

'use strict';
import express, { json, urlencoded } from 'express';
import morgan from 'morgan';
import mongoose from 'mongoose';
import passport from 'passport';
import cors from 'cors';
import dotenv from 'dotenv';
import auth from './routes/auth.js';
import routes from './routes/routes.js';

dotenv.config();

const app = express();

mongoose
    .connect(process.env.CONNECTION_URL, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    })
    .then(res => console.log('DB Connected!'))
    .catch(err => console.log(err, err.message));

app.use(cors())

app.use((req, res, next) => {
  res.header("Cross-Origin-Resource-Policy", "cross-origin")
  next()
})

app.use(passport.initialize());
app.use(json());
app.use(urlencoded({ extended: true }));
app.use(express.static(`public`));
app.use(morgan('common'));

auth(app);
import './authentication/passport.js';

routes(app)

app.use((req, res, err, next) => {
    if (err) {
        console.error(err.stack);
        res.status(500).send('Something broke!');
    }
    next();
});

const port = process.env.PORT || 3000;

app.listen(port, '0.0.0.0', () => console.log(`Listening on Port ${port}`));

执行此操作后，控制台抛出相同的错误并且 Cross-Origin 资源策略仍未设置。我的方法或文件结构有问题吗？

Answer 1

您在客户端启用了 COEP：

Cross-Origin-Embedder-Policy: require-corp

这是一个很棒的安全功能，意味着：

COEP: Everything (data, images etc) on this website is mine, or I fetch from it from other websites using CORS. (There can be a third way, that is data being authorized by cookies, http-auth, etc... which is not in our discussion, so don't bother here.)

所以，你有两个选择。第一个是禁用 COEP，但我假设您不想这样做。因此，另一种选择是对外部所有内容使用 CORS。例如，当你取东西时，使用：

fetch('https://externalwebsite.com/image.jpg',{mode:'cors'})

或者，要在 HTML 中嵌入外部图像，请使用 crossorigin

<img crossorigin="anonymous" src="https://externalwebsite.com/image.jpg">

注意 <img> 中的 crossorigin 属性表示 CORS。如果缺少，则表示“no-cors”，这是默认值。但请注意：当您使用 JavaScript 的 fetch 时，默认值为 {mode:'cors'}，即相反！

现在，如果您尝试这样做（使用 CORS，正如您应该的那样），浏览器将抛出另一个错误：

Access [...] has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这意味着……就是这样！外部服务器必须发送 header:

Access-Control-Allow-Origin: *

该设置意味着每个网站都可以使用服务器的资源（在您的情况下为 API），只要它不在请求中使用 use/send/receive cookie（因为...安全性）。在您的快速服务器中实现这一点的方法是设置：

res.header('Access-Control-Allow-Origin', '*');

每个打算为其他网站提供服务的服务器都必须有这个 ACAO header。（如果您只希望该网站访问您的 API，您可以放置您的其他网站而不是“*”。）

Note/Summary:

如果外部服务器有此 ACAO header，您可以使用 CORS/crossorigin 获取内容。如果它没有 ACAO header，你可以使用 no-cors / 不使用 crossorigin 获取东西。但是在您的网站启用 COEP 后，您只能使用 CORS/crossorigin 获取数据，因此外部服务器必须具有 ACAO。

现在，

至于您的服务器的 Cross-Origin-Resource-Policy，请记住 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)):

The policy is only effective for no-cors requests

During a cross-origin resource policy check, if the header is set, the browser will deny no-cors requests issued from a different origin/site.

这意味着，由于您只向该服务器发出 CORS 请求，因此 header 不会执行任何操作（在您的情况下）。因此，出于超出本主题的安全原因，服务器可以将其设置为“same-site”/“same-origin”。

如何预防ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep？

How to prevent ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep?

node.js

express

reactjs

cross-origin-embedder-policy

cross-origin-resource-policy