跨域读取阻塞 (CORB) 阻止了 React 应用程序上的跨域响应答案

【问题标题】：Cross-Origin Read Blocking (CORB) blocked cross-origin response on React app跨域读取阻塞 (CORB) 阻止了 React 应用程序上的跨域响应
【发布时间】：2019-08-02 02:31:06
【问题描述】：

我正在 React 上运行一个简单的应用程序，以显示我使用 React-Player 组件在https://my.pcloud.com/ 上上传的文件中的音轨。

但是，曲目不显示，并且我在控制台上收到以下错误：

“跨域读取阻止 (CORB) 阻止了具有 MIME 类型 text/html 的跨域响应 https://my.pcloud.com/publink/show?code=XZlsqq7ZK4mnFfNp1rJq8neYkc77Gp0yCd17。有关详细信息，请参阅 https://www.chromestatus.com/feature/5629709824032768。”

我进行了一些搜索，我意识到我需要做一些服务器端的事情来解决这个问题。我可以在客户端做些什么来解决这个问题吗？如果没有，关于如何设置服务器并获取音频播放器所需的内容的任何好的教程/指南？谢谢！

【问题讨论】：

CORS/CORB 问题归结为您的浏览器不接受某些端点，因为响应中不存在某些 CORS 标头。有浏览器插件可以为您自己的浏览器添加这些标头以进行测试，但对于生产，您必须在后端修复此问题
问题中引用的错误消息表明您的代码正在尝试在浏览器不期望 text/html 的某些上下文中使用 text/html 响应。 https://my.pcloud.com/publink/show?code=XZlsqq7ZK4mnFfNp1rJq8neYkc77Gp0yCd17 是一个 HTML 页面，显示了一个用于播放 rainbow.mp3 文件的嵌入式播放器。根据问题中的描述，您的代码似乎正在尝试加载 https://my.pcloud.com/publink/show?code=XZlsqq7ZK4mnFfNp1rJq8neYkc77Gp0yCd17 HTML 页面并在您应该使用 rainbow.mp3 文件的地方使用它。
如果你真的只想要 rainbow.mp3 文件，那么看起来你可以从 URL https://p-def7.pcloud.com/cBZDcSShLZuYtsxLZZZBhhJA7Z2ZZufXZkZE77RZV5Z77ZNVZl7Zf7ZK5ZDXZv0ZiXZS0ZVkZe0ZO5ZlkZlsqq7Z3fHmYtB5FLbucQWM4cXnUBbXqzny/rainbow.mp3 获得它
嘿@sideshowbarker 我认为你是对的。我试图只获取 mp3 文件而不是整个 html 页面。基本上，我只是想播放在线上传的 mp3 文件。关于如何做到这一点的任何提示？

标签： reactjs audio cross-origin-read-blocking react-player

【解决方案1】：

我遇到了同样的问题，我可以通过使用像 this 这样的代理来解决它。描述中有一个“如何使用”部分可以帮助您进行设置。快乐编码:-)

** 编辑 **

我（编辑）将 url 的内容复制并粘贴到此答案以用于 seo 目的

5分钟内制作的超级迷你php代理，可多次使用。

我做这个只是因为我在我的电脑上使用一台 vm 机器作为测试区，但我有一个像 192.168.231.128 这样的 IP，不会从我的电脑外面可以看到。为了在我的智能手机中测试一个网站，我已使用它来绕过此限制问题，将 url 称为 http://192.168.1.4/proxy/192.168.231.128/.

使用方法：

只要在你的 superminiphpproxy 之后调用你想访问的地址路径。

例如。 http://127.0.0.1/proxy/www.google.com http://www.yourwebsite.com/proxy/www.google.com

尽情享受吧！

【讨论】：