'Access-Control-Allow-Origin' when using axios and express

Question

I have a start_express.js file and I run it with node:

const express = require("express"); 

const app           = express(),  
      DEFAULT_PORT  = 5000

app.set("port", process.env.PORT || DEFAULT_PORT);
app.get("/whatever", function (req, res) {
    res.send("It works!");
    console.log("Something's wrong");
});

var server = app.listen(app.get("port"));

I my react app, I have a handleSubmit method that tries to get that response:

handleSubmit(event) {
    axios.get('http://127.0.0.1:5000/whatever')
      .then(function (response) {
        alert(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    event.preventDefault();
}

When I click on submit, the start_express server prints "Something's wrong", but the alert on the client never works. It gives me the following error:

Failed to load http://127.0.0.1:5000/whatever: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

How am I supposed to send requests from the client if I can't respond?

in your browser (client), is the express the server to provide the frontend code, so in your broswer bar, you are watching that url right? 127.0.0.1:5000 — Kalamarico, Oct 09 '17 at 22:46
No, the frontend is being run with "WebpackDevServerUtils" from [create-react-app](https://github.com/facebookincubator/create-react-app) on port 3000, so that it compiles the react code in real-time. — Ericson Willians, Oct 09 '17 at 22:48
Does it work if you query the server but on port 3000? If it's set as a proxy it should work. — MinusFour, Oct 09 '17 at 22:51
create-react-app provides an approach for this kind of issue (https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) — Jalissa, Oct 09 '17 at 22:51
Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — , Oct 09 '17 at 22:55
It worked with the cors, but this proxy thing was brilliant. I just used `axios.get('/whatever')` and it worked. Thanks guys, I was really lost. — Ericson Willians, Oct 09 '17 at 23:06

score 1 · Answer 1 · answered Oct 09 '17 at 22:49

You are serving the site from port 3000 http://localhost:3000 and therefor the browser is doing its job at protecting you from accessing a site that doesnt allow cross origins.

Simple enable CORS for express https://github.com/expressjs/cors

You can even enable CORS just during development for security reasons

if (process.env.NODE_ENV !== 'production) { app.use(cors()) }

score 1 · Accepted Answer · answered Oct 09 '17 at 22:51

Yes is confusing. But as the error message says, you need to set the Access-Control headers - on the server. The client part is fine. Using express the easiest way is probably with the cors package:

$ npm install cors

this way you'd allow all access - which you probably only want for testing:

const express = require("express"); 
const cors = require('cors');

const app           = express(),  
      DEFAULT_PORT  = 5000

app.use(cors());

...

see the nice doc here: https://github.com/expressjs/cors

'Access-Control-Allow-Origin' when using axios and express

2 Answers2