2023-04-26

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 :

  1. Clone https://github.com/FIAF0624/backend-infra

  2. terraform init

  3. terraform plan

  4. terraform apply

  5. 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

  6. Clone https://github.com/FIAF0624/frontend-infra

  7. terraform init

  8. terraform plan

  9. terraform apply

  10. Go to ECS -> rolling-ls-cluster -> Tasks -> Enter the Public IP in browser and click on the button.

  11. 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.



No comments:

Post a Comment