How to reverse proxy to a react app using htaccess?
Question
This is what I have: wordpress site: http://35.240.238.94 react app site: http://35.198.238.40
What I want to do: Reverse proxy to the react app so that when I enter this url: http://35.240.238.94/datastaging , the react app site ( http://35.198.238.40 ) is served but the url shouldn't change.
To do the above, I have added this to .htaccess:
RewriteEngine On
RewriteRule ^datastaging(.*) http://35.198.238.40/data [P]
RewriteEngine Off
I see the react app being served (tab title changes to the title of the app) but the page shown is blank and when I check the console it shows Unexpected token < . After further investigation the error points to the <!DOCTYPE html> line of my react app.
Any idea how to correct this and serve the react app properly?
Thanks!
1 answers
solution1
0 2019-04-11 04:17:12
NOTE: This is related to Getting Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html when serving ReactJS app . This is the same answer given to that question.
===
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.