Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding custom headers to "react-scripts start"

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:9
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

Pajncommented, Aug 21, 2018

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

sprlwrksAprilmintacpinedacommented, Aug 13, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adding custom headers to "react-scripts start" #10210 - GitHub
I would like to be able to set custom HTTP headers when using npm start, i.e. react-scripts start. Currently our proxy provides CSP...
Read more >
How to set headers for a React app created using 'create-react ...
Reference: Create React App adding CORS header ... For react-scripts start update your src/setupProxy.js : module.exports = function (app) ...
Read more >
[Solved]-How to set headers for a React app created using ...
Coding example for the question How to set headers for a React app created using 'create-react-app'-Reactjs.
Read more >
Advanced Configuration - Create React App
Variable Development Production BROWSER ✓ Used 🚫 Ignored BROWSER_ARGS ✓ Used 🚫 Ignored HOST ✓ Used 🚫 Ignored
Read more >
Strict Mode - React
In the above example, strict mode checks will not be run against the Header and Footer components. However, ComponentOne and ComponentTwo , as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found