How to deploy my AWS solution in order to avoid CORS issues?

Question

I have an application based on two main components:

• React application hosted on a S3 bucket https://app.com/
• Express application hosted on an Elastic Beanstalk env https://api.app.com

Since https://app.com/ is different than https://api.app.com I get a CORS error on Firefox and the data is not delivered.

How can I set my Route 53 records so I can achieve what I need for my application? (S3 and Beanstalk under the same domain?) I have no problem on changing the naming (api.app.com), I just don't know how to do :)

Answer 1

This piece of code did the trick:

//Enabling cors
var allowedOrigins = [
  'https://app.com', 
  'http://app.com'];
  
app.use(cors({
  origin: function(origin, callback){
    if(!origin) return callback(null, true);
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'Forbidden!';
      return callback(new Error(msg), false);
    }
    return callback(null, true);
  }
}));