AWS ECS Service Discovery Cors Issue?
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 -padmin123
and 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.
Comments
Post a Comment