Deploying a full webapp using Amplify, Elastic Beanstalk and linked a custom domain to it and created a ACM for it, but facing issues of CORS, browser not secure and DNS records. need help with that

Deploying a full-stack web application using AWS Amplify for the frontend and Elastic Beanstalk for the backend, while integrating a custom domain and SSL certificate, can be complex. Based on the issues you're facing, here are some steps to troubleshoot and resolve them:

1. CORS Issues: Ensure that your backend (Elastic Beanstalk) is properly configured to allow cross-origin requests from your frontend domain. In your Express.js application, you may need to use the 'cors' middleware and configure it to allow requests from your Amplify frontend domain.

2. Browser Security Warnings: If you're seeing browser security warnings, it could be due to SSL certificate issues. Double-check that your ACM certificate is correctly associated with both your frontend and backend domains. Ensure that the certificate covers both the main domain and any subdomains you're using.

3. DNS Records: Verify that your DNS records in GoDaddy are correctly set up. You should have:

   • CNAME record for ACM certificate validation
   • A record or CNAME record pointing to your Elastic Beanstalk environment
   • CNAME record for your Amplify frontend (if using a subdomain)

4. Custom Domain on Backend: If your backend works on the Elastic Beanstalk URL but not on the custom domain, check the following:

   • Ensure the Elastic Beanstalk environment is configured to use HTTPS
   • Verify that the load balancer listener is correctly set up with the SSL certificate
   • Check that the security group allows inbound traffic on port 443

5. DNS Propagation: Remember that DNS changes can take up to 48 hours to propagate globally. Use online DNS lookup tools to check if your records are visible from different locations.

6. SSL Configuration: In the Elastic Beanstalk console, make sure HTTPS is enabled and the correct SSL certificate is selected under the environment's load balancer configuration.

7. Amplify Custom Domain: For the frontend, use the Amplify Console to add your custom domain. Follow the provided DNS configuration instructions carefully.

If these steps don't resolve your issues, you may need to:

• Review your application code to ensure it's using the correct URLs for API calls
• Check Elastic Beanstalk and Amplify logs for any specific error messages
• Consider using AWS Route 53 for DNS management, as it can simplify the process of setting up custom domains with AWS services

Remember to test your application thoroughly after making any changes, and be patient as DNS changes propagate. If problems persist, you may need to engage AWS support for more in-depth troubleshooting specific to your account and configuration.

Sources
How to configure Elastic Beanstalk to handle HTTPS requests from Amplify app? | AWS re:Post
Custom domain for Amplify not working | AWS re:Post
Amplify custom domain setup issue | AWS re:Post
Connecting Frontend to backend on Elastic Beanstalk with HTTPS using ACM | AWS re:Post