Adding custom headers to "react-scripts start"

This is really helpful when building apps that are meant to be embedded in and interact with another app. For example, the Invision Trello Power-Up used “npm eject” to be able to add the CORS headers that Trello Power-Ups are required to have.

I’m working on a solution in my own fork of react-scripts to avoid ejecting, as suggested in the Guide, but I wanted to get feedback on whether this is a feature that could be merged upstreamed and what it would need to look like.

Here’s what I’m thinking: add a “headers” key to package.json, which contains an object of custom headers as passed to the Webpack dev server:

"headers": {
  "Access-Control-Allow-Origin": "*"
}

Other alternatives include adding a "cors": true or "cors": "*" option.

[Pajn]

Is there a reason CORS could not just be allowed for every origin in the dev server?

[sprlwrksAprilmintacpineda]

If you just want to be able to use cors during dev, you can simply add a chrome extension for that. There are plenty to choose from.

https://chrome.google.com/webstore/search/cors?_category=extensions