如何防止ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep？

Question

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

\n

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

\n

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

\n

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\xe2\x80\x99t explicitly grant permission to be loaded.\nTo solve this, add the following to the resource\xe2\x80\x99s response header:\nCross-Origin-Resource-Policy: same-site if the resource and your site are served from the same site.\nCross-Origin-Resource-Policy: cross-origin if the resource is served from another location than your website. \xe2\x9a\xa0\xef\xb8\x8fIf you set this header, any website can embed this resource.\n

\n

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

\n

应用程序.js

\n

'use strict';\nimport express, { json, urlencoded } from 'express';\nimport morgan from 'morgan';\nimport mongoose from 'mongoose';\nimport passport from 'passport';\nimport cors from 'cors';\nimport dotenv from 'dotenv';\nimport auth from './routes/auth.js';\nimport routes from './routes/routes.js';\n\ndotenv.config();\n\nconst app = express();\n\nmongoose\n    .connect(process.env.CONNECTION_URL, {\n        useNewUrlParser: true,\n        useUnifiedTopology: true,\n    })\n    .then(res => console.log('DB Connected!'))\n    .catch(err => console.log(err, err.message));\n\napp.use(cors())\n\napp.use((req, res, next) => {\n  res.header("Cross-Origin-Resource-Policy", "cross-origin")\n  next()\n})\n\napp.use(passport.initialize());\napp.use(json());\napp.use(urlencoded({ extended: true }));\napp.use(express.static(`public`));\napp.use(morgan('common'));\n\nauth(app);\nimport './authentication/passport.js';\n\nroutes(app)\n\napp.use((req, res, err, next) => {\n    if (err) {\n        console.error(err.stack);\n        res.status(500).send('Something broke!');\n    }\n    next();\n});\n\nconst port = process.env.PORT || 3000;\n\napp.listen(port, '0.0.0.0', () => console.log(`Listening on Port ${port}`));\n\n

\n

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

\n

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 中嵌入外部图像，请使用crossorigin

<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（因为......安全）。在 Express 服务器中实现此功能的方法是设置：

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

每个打算向其他网站提供服务的服务器都必须具有此 ACAO 标头。（如果您只想让其他网站访问您的 API，则可以放置其他网站而不是“*”。）

注/摘要：

如果外部服务器具有此 ACAO 标头，您可以使用 CORS/crossorigin 获取内容。如果它没有 ACAO 标头，您可以使用 no-cors / without crossorigin 来获取内容。但是在您的网站中启用 COEP 后，您只能使用 CORS/crossorigin 进行获取，因此外部服务器必须具有 ACAO。

现在，

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

1. 该策略仅对no-cors请求有效
2. 在跨源资源策略检查期间，如果设置了标头，浏览器将拒绝从不同源/站点发出的no-cors请求。

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