Lets assume I have project on .NET and is required to develop frontend for some additional module on ReactJS. According to requirements, I can login only on backend side (it has it's own UI) and frontend on React should be a standalone application. I can authorize on frontend side with backend API by passing cookies (that I get after login on backend) in Header.
I have placed source code to /var/www/project so there is such structure:
/var/www/project/backend - .NET serves to 127.0.0.1:5000
/var/www/project/frontend - I have generated a static build from ReactJS to /var/www/project/frontend/index.html
My Apache configuration:
<VirtualHost *:80>
ServerName project.com
ProxyPass / http://127.0.0.1:5000/
ProxyPassReverse / http://127.0.0.1:5000/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
<VirtualHost *:80>
ServerName subdomain.project.com
DocumentRoot /var/www/project/frontend/
<Directory "/">
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Backend works and I can access it at project.com. Frontend works also on subdomain.project.com. But I need backend to path cookie (e.g. http://prntscr.com/lgfikx) to frontend (where currently is http://prntscr.com/lgfjlx)
I have tried ProxyPassReverseCookiePath, ProxyPassReverseCookieDomain, Set-Cookie, but failed. Probably I have just used it wrong, but I have not found anywhere a working example. Answers on similar questions have not worked for me.
My final goal is to authorize frontend so I could talk to backend API. Can somebody tell me the best or just any working solution of how to do it?
If you can see the correct cookie in the WebDev tools, it's most likely that you set the cookie to HttpOnly and didn't make it available to JavaScript in the first place.
If your backend is aware of the domain name used (the cookies it sets should say .project.com in the Domain column of your web developer tools and not 127.0.0.1 or localhost), your frontend app should be able to access the cookies as well.
You only need the ProxyPassReverseCookieDomain if your backend server is using a different domain name than the one the reverse proxy uses. (i.e.: backend lives at domain.com, but you're accessing it through a reverse proxy at project.com)
Related
So i have a React application , and a NodeJS (Express) Application running on port 4000.
i created the build for the react app and deployed it along with the backend on Apache.
The react app works fine , but the Frontend calls for the Node API dont seem to work , here's my Apache config:
<VirtualHost *:80 >
ServerName example.com
DocumentRoot /var/www/html
<Directory /var/www/html >
Options -Indexes +FollowSymLinks
AllowOverride None
Require all granted
</Directory>
</VirtualHost>
The front end doesnt seem to reach the backend am i missing something in the config ?
By the way in the front end i use Axios as a http client to make requests to the backend with its URL http://localhost:4000/ , and the app works fine in my local machine.
Thanks in advance!
I have a MERN application split into:
1. client folder : Front-End code (REACT app)
2. server folder : API Code (Express, NodeJs)
For some reason, front-end calls the /api part of the app, but does not return a response. Is the issue in Apache2 setup? or something in the react app. And how is the link usually done between ExpressJs (Backend) and the ReactJs (Frontend).
Routing is setup through an Apache2 Reverse Proxy
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerName example.com
ServerAlias www.example.com
DocumentRoot /var/www/example.com/
Options -Indexes
ProxyRequests on
ProxyPass /api https://example.com:3000/
ProxyPassReverse /api https://example:3000/
ProxyPass / https://example.com:7000/
ProxyPassReverse / https://example:7000/
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
</IfModule>
Just to clarify in picture of what I'm trying to achieve:
I think the issue is that you've forgotten to prepare your React App for production. You spent all the time developing it and using react-scripts-start or something similar. When you are done developing you have to run react-scripts-build so that your code can be transpiled into something the browser can read. Web browsers don't read things like import and require.
Here's info on preparing for production (it's very simple)
https://create-react-app.dev/docs/production-build
And here's info on how to integrate it with your back end:
https://create-react-app.dev/docs/deployment#other-solutions
Essentially:
In your client folder run
npm build
In your server.js add
app.use(express.static(__dirname + '/build')
Now a client requests your index.html from your back end server and it serves your react app. Added benefit: no more CORS errors. Any work-around you did for CORS you should probably take it out.
I want to build a React powered app that uses a self hosted instance of Cockpit to fetch data and host both on an Apache server.
I'm familiar with installing Cockpit to the default DocumentRoot, but I'm not sure where to put the frontend files. I don't want to just messily dump them in the same folder, since there'd probably be also conflicts with Cockpit files.
How can I seperate both apps in a clean way and tell Apache to serve them correctly?
After doing a bit of research with more specific keywords, I found the answer myself:
Basically you want to create folders for both app and API (i.e. Cockpit) in your DocumentRoot. Then you are able to set Virtual Hosts in your Apache configuration like this (assuming your folders are named client and server and your DocumentRoot is /var/www/html/):
<VirtualHost *:80>
DocumentRoot "/var/www/html/client"
ServerName www.example.com
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/var/www/html/server"
ServerName api.example.com
</VirtualHost>
API calls can then be made via the api.example.com subdomain.
See https://httpd.apache.org/docs/2.4/vhosts/examples.html for more examples.
I have a website (http://www.goodfoodwaiheke.org) configured as a virtual host on Apache2. The virtual hosting configuration redirects traffic from apache2 to tomcat8 via these conf parameters:
<VirtualHost *:80>
ServerName www.goodfoodwaiheke.org
ServerAlias goodfoodwaiheke.org
ProxyRequests Off
ProxyPreserveHost On
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass / http://localhost:8080/coop/
ProxyPassReverse / http://localhost:8080/coop/
</VirtualHost>
On tomcat, the /coop/ part of the address invokes the JSF application in coop.war. This seems to work. The correct welcome page is served except for one problem. The url for static resources are being served incorrectly. For example, the url of the background image on the welcome page, which is actually in http://www.goodfoodwaiheke.org/coop/resources/images/GoodFoodWaiheke4.png is served to the browser as http://www.goodfoodwaiheke.org/coop/coop/resources/images/GoodFoodWaiheke4.png (i.e. the coop app name is duplicated in the url). This is causing static resources to not work. Although I can sort of understand why this may be happening I am unsure of how to fix it. I know I could offload the static resources onto the Apache2 server but for various reasons I would like the war file to be self-contained and for tomcat to be responsible for serving the whole site.
I'd be very grateful for any suggestions as to what I need to change.
I'm setting up a multi-site environment with Wagtail (perhaps a bit ambitious as I'm new to Wagtail, Django and Python, but I would like to migrate some simple sites to Wagtail and wanted to have the correct setup from the beginning).
I have created a list of sites in the Wagtail admin and the home pages for each of the sites.
I would like some of the site to be reachable through multiple URL's (name.com + name.othername.com).
Should I create a new site setting (through "Add Site" in the admin) for each URL, or is there a better/different way to handle this?
I would recommend to use an external web server (eg. Apache) to work with multiple domains. Define a virtual host proxy to point to your wagtail app.
Here is an example:
<VirtualHost *:80>
ServerName example1.com
ServerAlias www.example1.com
ServerAlias example2.com
# Here we define the proxy to your wagtail app
ProxyPass / http://localhost:8000/
# Reverse Proxy for load balancing
ProxyPassReverse / http://localhost:8000/
# Preserves the host if you use docker
ProxyPreserveHost On
</VirtualHost>
You will need an external web server anyway to serve static content in non-debug mode.