I am implementing a full stack app on ECS with Service Discovery Enabled. The infrastructure consists of a backend which talks to a mysql RDS database and a frontend with VueJS which makes request to the nodejs backend. I am running into a cors issue when i make a request from the frontend.To reproduce the issue :
-
terraform init
-
terraform plan
-
terraform apply
-
When the mysql instance is up and running, connect to the database using
mysql -h <endpoint> -u admin -padmin123and run the following query :DROP DATABASE IF EXISTS customer;
CREATE DATABASE customer;
USE customer;
DROP TABLE IF EXISTS books;CREATE TABLE books (
id int NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
price int NOT NULL,
PRIMARY KEY (id)
);INSERT INTO books VALUES (1,’Basic Economics’, 20),(2,’Harry Potter’, 15),(3,’Physics’, 17);
Select * from books -
terraform init
-
terraform plan
-
terraform apply
-
Go to ECS -> rolling-ls-cluster -> Tasks -> Enter the Public IP in browser and click on the button.
-
Check the browser console ( Right click -> Inspect -> Console ) and you will see the following error.
Access to XMLHttpRequest at 'api.example.terraform.com:3300/mysql' from origin 'http://<public-IP>' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
GET api.example.terraform.com:3300/mysql net::ERR_FAILED
Uncaught (in promise) rt {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
However if i create an EC2 instance and make a request using
curl api.example.terraform.com:3300/mysql, i get the response back.
This is my NodeJS backend : https://github.com/FIAF0624/backend/blob/main/server.js and i have allowed cors as well explicitly adding the headers. The Security group allows all traffic from anywhere. Not sure why i am running into this cors issue. The app runs locally for me just fine. I am not sure where the issue exactly is. Any help will be appreciated.
This is the frontend repo : https://github.com/FIAF0624/frontend/blob/a2e89010d3dfaa75caecfb8d656723abe2ff3456/src/components/Dashboard.vue#L29 where i am using Axios to make a request.
2
Answers
jub0bs is correct.
Although one other thing to consider is to ensure that CORS has not been set somewhere in the ECS configuration on AWS as well.
Because if that happens your CORS settings will get appended to the CORS settings of ECS and cause problems with unresolved CORS.
The problem is that the Frontend is not responsible for making the request to the backend. It only serves the Javascript, HTML and CSS. What is making the request in this case is the browser. So your browser/laptop is not on the same network as where the backend resides. This is why you are able to still make the request from the EC2 server.
Solution : Setup a VPN server ( OpenVPN or AWS VPN ) to interact with your VPC network. And then make a request and it should work. or alternatively, follow Matt’s solution if you are okay with having a public DNS. but remember not every API will be public facing.
or alternatively you can also re route the request via a proxy server which in your case can be the EC2 instance which already resides in the same network.