On the EC2 server, there are docker containers running on localhost. The client sends a request to the server https://localhost:5000 from http://34.203.190.56/. It returns a CORS error:
Access to XMLHttpRequest at 'http://localhost:5000/api/matches/generate?userId=4optBd6PKgQZa4Ops3HI7KPYcLm2' from origin 'http://34.203.190.56' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space
Task:
In production, the client should be able to make requests to the server.
Action:
Thoughts:
Maybe the backend docker container is not running on localhost:5000 . The frontend request is coming from http://34.203.190.56/, not localhost.
I could modify the FROM host value in the axios headers on the frontend. This is a bit hacky, but could work.
Server Status Alerts
It would help to render alert components when the frontend is disconnect from the server.
The React should only load after it has connected to Firebase, AND the backend API container.
The app should be wrapped in a status checker. It should have state to be loading, connected to Firebase, and connected to API.
The status checker should be loading by default and render a loading spinner.
When status checker finishes loading:
If both status checks are true => render the React APP
If NOT both status checks pass => render warning message alert (e.g. "Unable to connect to backend server")
Question:
How do I verify that the Firebase is connected?
Result
The status checks made is much easier to verify the connection for the server and Firebase during development. This also helped verify that the app was working with the correct ENV variables during end to end testing.
BEFORE, it was a gamble if everything worked in production, only knowing IF it worked AFTER deploying EVERYTHING.
AFTER, I was able to PROVE everything worked in production with End-to-end tests before deploying.
RnD
Access to XMLHttpRequest at 'http://localhost:5000/api/matches/generate?userId=4optBd6PKgQZa4Ops3HI7KPYcLm2' from origin 'http://34.203.190.56' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address spacelocal.
Ticket
Issue: #80
Production Server CORS Error
Situation:
On the EC2 server, there are docker containers running on localhost. The client sends a request to the server
https://localhost:5000
fromhttp://34.203.190.56/
. It returns aCORS
error:Access to XMLHttpRequest at 'http://localhost:5000/api/matches/generate?userId=4optBd6PKgQZa4Ops3HI7KPYcLm2' from origin 'http://34.203.190.56' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space
Task:
In production, the client should be able to make requests to the server.
Action:
Thoughts:
Maybe the
backend
docker container is not running onlocalhost:5000
. Thefrontend
request is coming fromhttp://34.203.190.56/
, notlocalhost
.I could modify the FROM host value in the
axios
headers on the frontend. This is a bit hacky, but could work.Server Status Alerts
It would help to render
alert
components when the frontend is disconnect from the server.The React should only load after it has connected to Firebase, AND the backend API container.
The app should be wrapped in a status checker. It should have state to be loading, connected to Firebase, and connected to API.
The status checker should be loading by default and render a loading spinner. When status checker finishes loading: If both status checks are true => render the React APP If NOT both status checks pass => render warning message alert (e.g. "Unable to connect to backend server")
Question:
How do I verify that the Firebase is connected?
Result
The status checks made is much easier to verify the connection for the server and Firebase during development. This also helped verify that the app was working with the correct ENV variables during end to end testing. BEFORE, it was a gamble if everything worked in production, only knowing IF it worked AFTER deploying EVERYTHING. AFTER, I was able to PROVE everything worked in production with End-to-end tests before deploying.
RnD
Access to XMLHttpRequest at 'http://localhost:5000/api/matches/generate?userId=4optBd6PKgQZa4Ops3HI7KPYcLm2' from origin 'http://34.203.190.56' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space
local.