Adding custom headers to "react-scripts start"

[ariofrio]

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.

[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

[Pajn]

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

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 7 days if no further activity occurs.

[lafeber]

The cors extensions don't work for us locally, probably due to the same domain but different ports?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.