reactjs - Chrome CORBS 图像问题

标签 reactjs cross-origin-read-blocking

我有一个 react webapp,它调用一个 api(使用 fetch 调用另一个 api)获取图像 url,并通过 img 标签在屏幕上呈现图像。

我遇到的问题是图像无法加载,而是在控制台中收到 CORB 警告。

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://website.com with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

请注意,我遇到的问题是 CORB 而不是 CORS 很多在线帖子只是提供了向 header 添加内容的解决方案,这可能会解决 CORS 问题,但我认为它们无法解决 CORB。无论如何,我正在使用的 api 不是我的,所以无论如何我都无法在服务器端添加任何东西。

我是否需要向我的项目客户端添加一些东西才能让它工作?任何想法将不胜感激。

最佳答案

发生这种情况是因为您请求的类型与服务器响应的数据类型不匹配。要克服这个问题,请尝试比较两者。但是,如果您无权访问目标服务器,则可以对目标服务器进行代理。再创建一个服务器来编辑来自 example.com 的响应 header

示例:

客户端应用 => 您的代理服务器具有修改后的 Content-Type header (Ex: http://myproxy.com)=> 您的目标服务器(Ex: http://example.com)

或者如果您不想创建新的服务器并且该应用程序仅由您个人打开,您可以将浏览器替换为尚未应用CORBS 的版本。

除此之外,据我所知,没有其他针对客户的尝试。

关于reactjs - Chrome CORBS 图像问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62564315/

相关文章:

reactjs - 对于 React+Redux 应用程序,发送规范化或非规范化的 API 响应更好吗?

javascript - React.Js 背景图像正确显示,顶部有文字

node.js - 不存在 'Access-Control-Allow-Origin' header .. Angular 7 和 Express

angular - 在 'http://localhost:8080 from origin ' http ://localhost:4200' has been blocked by CORS policy 访问 XMLHttpRequest

Java-Spring 启动 : Access-Control- Allow-Origin not working

angular - 使用 Angular 向 facebook oauth 发送 CORS 问题

javascript - 严格的 CSP : How to set nonce for styled components in next. js?

reactjs - 在 babel/webpack 中编译时评估条件

google-chrome-extension - 如何避免 Chrome Web 扩展中的跨源读取阻止 (CORB)

html - 导航栏没有使我的链接居中,我不知道如何使用 flexbox 来做到这一点