Question

这就是我所拥有的： WordPress网站：http://35.240.238.94 反应应用程序网站：http://35.198.238.40

我想做什么：反向代理到react应用，以便在我输入以下网址时： http://35.240.238.94/datastaging，React应用程序网站（http://35.198.238.40）已投放，但网址不应更改。

要完成上述操作，我已将其添加到.htaccess中：

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

我看到正在投放React应用（标签标题更改为应用标题），但显示的页面为空白，当我检查控制台时，它显示了Unexpected token <。经过进一步调查后，错误指向我的应用程序的<!DOCTYPE html>行。

有什么主意如何解决这个问题并正确地为React应用服务？

谢谢！

Answer 1

注意：这与Getting Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html when serving ReactJS app有关。这是对该问题的相同答案。

===

弄清楚了。由于使用了反向代理，浏览器正在Wordpress网站的服务器而不是React应用程序服务器中查找ReactJS应用程序的静态文件夹。我收到了CORB警告，因为它没有获得期望的CSS文件。

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

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

希望这对某人有帮助。

如何使用htaccess将代理反向代理到React应用？

1 个答案: