Overcoming Deployment & CORS Challenges in a Full-Stack AWS Project

At Strinosoft, we recently deployed a full-stack application using React (frontend) and Spring Boot (backend) on AWS, with a custom domain setup. Here's a comprehensive summary of the real-world challenges we faced and how we resolved them to achieve a smooth, production-ready deployment.

The Stack

• Frontend: React.js hosted on AWS S3 + CloudFront

• Backend: Spring Boot deployed on AWS Elastic Beanstalk

• Source Control & CI/CD: AWS CodeCommit + CodeBuild + CodePipeline

• Domain: techdivinity.in with subdomains like https://www.techdivinity.in and https://api.techdivinity.in

Key Challenges & Solutions

✅ 1. CORS Issues Between Frontend & Backend

Problem: Frontend requests (hosted on CloudFront) were blocked by CORS when calling the Spring Boot backend on a different subdomain (api.techdivinity.in).

Error Message:

pgsql

CopyEdit

Access to XMLHttpRequest at 'https://api.techdivinity.in/api/iqac-committee' from origin 'https://www.techdivinity.in' has been blocked by CORS policy.

Solution:

• Configured CORS headers in WebConfig.java in Spring Boot using CorsRegistry.

• Added .ebextensions/cors.config in Elastic Beanstalk to ensure NGINX passes the correct headers.

• Ensured https was used consistently to avoid mixed content issues.

✅ 2. Spring Security Blocked API Calls (Even When Not Used)

Problem: Despite not using Spring Security, including spring-boot-starter-security in the pom.xml enabled default security, which blocked requests.

Solution:

• Removed the following dependency from pom.xml:

xml

CopyEdit

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency>

• Cleaned the project and redeployed.

✅ 3. Elastic Beanstalk Misconfiguration

Problem: Backend API returned 302 redirect loops or failed silently.

Solution:

• Ensured the Spring Boot app was deployed with the correct port and context path.

• Verified that .ebextensions was structured correctly and deployed with the application .jar.

✅ 4. Mixed Content Errors

Problem: Requests were being made to http://api.techdivinity.in from a secure https frontend, triggering browser security blocks.

Solution:

• Ensured all Axios calls used https://api.techdivinity.in.

• Checked baseUrl configurations in all service files.

✅ 5. React Axios Requests Using Relative Paths

Problem: Using axios.get("/api/iqac-committee") worked locally (due to proxy), but failed in production.

Solution:

• Replaced relative paths with absolute URLs pointing to the correct subdomain:

js

CopyEdit

const committeeUrl = "https://api.techdivinity.in/api/iqac-committee";

???? Result

After these refinements, our frontend and backend communicate seamlessly across subdomains using HTTPS. The full CI/CD pipeline with CodeCommit → CodeBuild → CodePipeline ensures zero-downtime deployments and easy scalability.

 Final Thoughts

Setting up production-ready full-stack apps with AWS can be complex, especially around domain routing, CORS, and deployment automation. However, with the right architecture and configuration tweaks, it’s completely achievable.

Tech used:

• React, Spring Boot, Maven

• AWS S3, CloudFront, Elastic Beanstalk, CodePipeline

• Route 53 for DNS management

Written by the Strinosoft DevOps & Full-Stack Team

Need help deploying your app the right way? Contact us at strinosoft.com ????