Restrict CORS to Specific Origins

[samanthasbytes]

The app currently allows access from all origins using app.use(cors());. This is not best practice and poses a security risk. Update the CORS configuration to restrict access to trusted origins only.

Important Note Regarding CORS

Once you’ve set up your site’s name, you need to add your site’s URL to CORS’ allowed origins; otherwise, you’ll get CORS-related errors once you try to open your app’s URL.

Open your index.js file in your myFlix API project folder. If you have the following code as your CORS configuration, then it means you’ve allowed a specific set of origins to access your API.

const cors = require('cors');
let allowedOrigins = [...];

app.use(cors({
  origin: (origin, callback) => {
    if (!origin) return callback(null, true);
    if (allowedOrigins.indexOf(origin) === -1) { // If a specific origin isn’t found on the list of allowed origins
      let message = 'The CORS policy for this application doesn’t allow access from origin ' + origin;
      return callback(new Error(message), false);
    }
    return callback(null, true);
  }
}));

This means that you’ll need to add your site’s URL to the allowedOrigins array. If your site’s URL on Netlify is, for example, https://my-awesome-site123.netlify.app, then your array would need to look something like this:

let allowedOrigins = ['http://localhost:8080', 'http://testsite.com', 'http://localhost:1234', 'https://my-awesome-site123.netlify.app'];

Once done, commit and push the change to your myFlix API GitHub repository (make sure to switch the repository first in GitHub Desktop), then push the same change to Heroku by running git push heroku main from inside your myFlix API project folder in the terminal.

If, on the other hand, you’ve allowed access from all origins by having app.use(cors()); as your CORS configuration code (instead of the code listed earlier), then you shouldn’t get any CORS errors (but, as you know, this way isn’t recommended!).