Reactjs: access-control-allow-origin not specified for react bundle file

Question

In my custom webpack, babel spawed React app, I have the bundle file created.

From the backend(node), I'm sending a HTML file with script tag with the source tag referring to frontend:3000/front_bundle.js . It works perfectly for custom webpack babel app.

However, React app created with create-react-app , when I try to send html file from backend with script tag pointing to bundle file generated by react-scripts.

It says, access to script at http://localhost:2000/bundle.js from origin http://localhost:3000 has been blocked by CORS policy: NO "Access-control-Allow-Origin" header is present on the requested resource

I have the header set in node,

app.use((req,res,next)=>{
   res.header("Access-control-allow-origin", "*")
   next();
});

also tried app.use(cors()); at node.

at front-end public/index.html, I added crossorigin="anonymous". Added a proxy in package.json referring to http://localhost:3000. Still the same issue.

Any suggestion on how to fix this?

Answer 1

In my custom webpack, babel spawed React app, I have the bundle file created.

From the backend(node), I'm sending a HTML file with script tag with the source tag referring to frontend:3000/front_bundle.js . It works perfectly for custom webpack babel app.

However, React app created with create-react-app , when I try to send html file from backend with script tag pointing to bundle file generated by react-scripts.

It says, access to script at http://localhost:2000/bundle.js from origin http://localhost:3000 has been blocked by CORS policy: NO "Access-control-Allow-Origin" header is present on the requested resource

I have the header set in node,

app.use((req,res,next)=>{
   res.header("Access-control-allow-origin", "*")
   next();
});

also tried app.use(cors()); at node.

at front-end public/index.html, I added crossorigin="anonymous". Added a proxy in package.json referring to http://localhost:3000. Still the same issue.

Any suggestion on how to fix this?