如何预防ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep？

Question

我正在尝试访问我的电影API，该API通过React应用程序返回数据，包括电影海报的图像。这张图片是从一个外部网站请求的。每次我向我的\movies端点发出请求时，图像都会被阻塞，并在控制台中得到以下消息

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

当查看“网络”选项卡中的请求时，我收到以下消息:启用跨源资源策略

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模块，它以前是用来解决我的问题的访问控制-允许-起源错误。我添加了一些额外的中间件来尝试按照指示添加报头。这是带有该代码的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}`));

完成此操作后，控制台将引发相同的错误，并且仍然没有设置跨源资源策略。我的方法有什么问题吗?或者我的文件结构方式有什么问题吗？

Answer 1

您已经在客户端启用了COEP：

Cross-Origin-Embedder-Policy: require-corp

这是一个很好的安全特性，它意味着：

COEP:这个网站上的所有东西(数据、图像等)都是我的，或者我用CORS从其他网站上获取。(可以有第三种方式，即由cookie、http-auth等授权的数据.这不在我们讨论的范围之内，所以不要在这里费心。)

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

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

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

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

注意，crossorigin属性在<img>中的意思是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.

这意味着..。就是那个！外部服务器必须发送报头：

Access-Control-Allow-Origin: *

这种设置意味着每个网站都可以使用服务器的资源(在您的情况下是API)，只要它在请求中不使用/发送/接收cookie(因为.安保)。在您的快速服务器中实现此功能的方法是设置：

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

每一个想要向其他网站提供服务的服务器，都必须有这个ACAO头。(如果你只想让网站访问你的API，你可以放置你的另一个网站而不是"*“。)

Note/Summary:

如果外部服务器具有此ACAO头，则可以使用CORS/ header获取内容。如果它没有ACAO头，您可以使用无cors/没有交叉来源来获取东西。但是在您的网站中启用了COEP之后，您只能使用CORS/十字路口来获取，因此外部服务器必须有一个ACAO。

现在,

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

策略只对跨源资源策略检查( requests

• During no-cors)有效，如果设置了标头，浏览器将拒绝从不同的origin/site.

发出的no请求。

这意味着，由于您只向该服务器发出CORS请求，因此该标头不会执行任何操作(在您的情况下)。因此，由于超出本主题的安全原因，服务器可以将其设置为“同一站点”/“相同来源”。