如何防止ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep?

7
我想访问我的电影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模块,之前用它来解决我的Access-Control-Allow-Origin错误问题。我添加了一些额外的中间件,按照指示尝试添加标头。以下是包含该代码的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}`));

执行此操作后,控制台仍会抛出相同的错误,跨源资源策略仍未设置。我的方法或文件结构是否有问题?


#1 图像是通过ajax还是<img>请求的? #2 在网络选项卡中检查,尝试找到OPTIONS请求(在图像之前),并检查是否缺少了期望的标头。 #3 尝试使用纯ajax加载图像以重现错误。https://gist.github.com/jrichardsz/6b6f2c0d052253f7b76a35427bdff1b9 - JRichardsz
https://stackoverflow.com/a/67267880/441757 的答案可能会有用。 - sideshowbarker
@JRichardsz 图像是使用<img>请求的。看起来问题在于我尝试发送的标头未设置在响应中。 - Myles Jefferson
1个回答

24

您的客户端启用了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">

请注意,<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.

这意味着...确切地说!外部服务器必须发送头文件:

Access-Control-Allow-Origin: *

该设置意味着每个网站都可以使用服务器的资源(在您的情况下为API),只要它不在请求中使用/发送/接收cookie(因为...安全性)。在Express服务器中实现此设置的方法是设置:

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

每个服务器都必须拥有这个ACA0头部,以便向其他网站提供服务。(如果您只想让该网站访问您的API,可以将其他网站替换为“*”)。
注/总结:
如果外部服务器具有此ACA0头,则可以使用CORS/crossorigin获取内容。如果没有ACA0头,则可以使用no-cors/without crossorigin获取内容。但是,如果您的网站启用了COEP,则只能使用CORS/crossorigin进行提取,因此外部服务器必须具有ACA0。
现在,
关于您的服务器具有的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请求,因此此标头在您的情况下没有任何作用。因此,出于超出本主题的安全原因,服务器可以将其设置为“same-site”/“same-origin”。

关于CDN上的脚本怎么办?我因为一个Go中间件(https://github.com/gofiber/fiber/blob/master/middleware/helmet/helmet_test.go)而遇到了这个错误。 - TheRealChx101

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接