在提供 ReactJS 应用程序时，获取跨源读取阻止 (CORB) 阻止了 MIME 类型 text/html 的跨源响应 [英] Getting Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html when serving ReactJS app

问题描述

我有一个 Wordpress 测试站点，可以反向代理 reactjs 应用程序.但是，提供了一个空白页面，我在控制台上看到 Cross-Origin Read Blocking (CORB) 阻止了 MIME 类型 text/html 的跨源响应.

I have a Wordpress test site that reverse proxy to a reactjs app. However, a blank page is served and I see Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html on the console.

当我添加一个简单的你好，世界！"在 public/index.html 中，显示了 Hello World，但不显示页面的其余部分.

When I add a plain "Hello, World!" in public/index.html, the Hello World is shown but the rest of the page is not shown.

进一步解释一下，我的 wordpress 站点有一个子文件夹，用于提供 reactjs 应用程序.

To explain further, my wordpress site has a subfolder that serves reactjs app.

我的 reactjs 应用程序是:http://dspstaging.drwealth.com我的测试 wordpress 站点是:http://35.240.238.94我为 reactjs 应用提供服务的网址是:http://35.240.238.94/datastaging

My reactjs app is: http://dspstaging.drwealth.com My test wordpress site is: http://35.240.238.94 My url that serves the reactjs app is : http://35.240.238.94/datastaging

如您所见，http://dspstaging.drwealth.com 运行良好，但是，当我尝试通过 http://35.240.238.94/datastaging 访问，只显示Hello World"和控制台显示 CORB 警告.

As you can see, http://dspstaging.drwealth.com works well, however, when I try to access via http://35.240.238.94/datastaging, only "Hello World" is shown, and console displays a CORB warning.

推荐答案

想通了.由于反向代理，浏览器在 Wordpress 站点的服务器而不是 React 应用程序服务器中寻找 ReactJS 应用程序的静态文件夹.我收到 CORB 警告，因为它没有获得预期的 CSS 文件.

Figured it out. Due to the reverse proxy, the browser was looking for the ReactJS app's static folder inside the Wordpress site's server instead of the React app server. I get the CORB warning since it was not getting the CSS file that it was expecting.

为了解决这个问题，我不得不创建另一个重写规则，这次是针对文件夹/static 的请求.我的 .htaccess 文件现在看起来像这样:

To fix I had to create another rewrite rule, this time for requests for the folder /static. My .htaccess file now looks something like this:

RewriteEngine On
RewriteRule ^datastaging(.*) http://35.198.238.40/data/$1 [P]
RewriteEngine Off

# Rewrite rule for static folder
RewriteEngine On
RewriteRule ^static(.*) http://35.198.238.40/static/$1 [P]
RewriteEngine Off

希望这对某人有所帮助.

Hope this helps someone.

这篇关于在提供 ReactJS 应用程序时，获取跨源读取阻止 (CORB) 阻止了 MIME 类型 text/html 的跨源响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！