0

I'm doing a project in React.js where I have to get API's datas and I got the

No Access-Control-Allow-Origin header is present on the requested resource. Origin 'null' is therefore not allowed access.

problem

Even with this in the server.js:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const cors = require('cors');
const port = process.env.PORT || 5000;

app.use(cors())

app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, 
Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, 
DELETE');
next();
});

app.use(bodyParser.urlencoded({ extended: true }))

app.use(bodyParser.json())

app.listen(port, () => console.log(`Listening on port ${port}`));

Can someone help me because I saw like 20 topics about this, and I did all the solutions given in the commentaries.

Thank you !

edit : if this can help, the status code of the request is 304

VersifiXion
  • 2,152
  • 5
  • 22
  • 40
  • You use [cors npm](https://www.npmjs.com/package/cors) package and send headers manually, I guess you need to choose only 1 way to go – Alejandro Nov 20 '18 at 19:00
  • @Alex even when I tried one way, it wasn't working, but do you agree the fact that everything is OK in my code ? – VersifiXion Nov 20 '18 at 19:03
  • `res.header()` semantically looks ok, but I don't see it in express doc. Can you try one of [this ways](https://stackoverflow.com/questions/23751914/how-can-i-set-response-header-on-express-js-assets) instead? – Alejandro Nov 20 '18 at 19:05
  • try `res.set()` or `res.setHeader()` instead https://stackoverflow.com/questions/40840852/difference-between-res-setheader-and-res-header-in-node-js/40841390 – Alejandro Nov 20 '18 at 19:09
  • @Alex ok i'm trying with cors (the status is now 200 but still get the error message) then I'll try your solution – VersifiXion Nov 20 '18 at 19:19

1 Answers1

1

In your server change this line:

 app.use(cors({origin:"http://localhost:3000"}));

Or whatever your host path is.

vitomadio
  • 1,140
  • 8
  • 14
  • ok, the status is now 200, but still have the error issue hmm – VersifiXion Nov 20 '18 at 19:18
  • You can get rid of all your res.header stuff – vitomadio Nov 20 '18 at 19:25
  • i still get the error, and I only have `const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const port = process.env.PORT || 5000; app.use(cors({origin:"http://localhost:3000"})); app.listen(port, () => console.log(`Est sur le port ${port}`)); app.get('/express_backend', (req, res) => { res.send({ express: 'Le backend Express est bien connecté à React' }); });` – VersifiXion Nov 20 '18 at 19:28
  • @victomadio thank you man, you're so kind, here is the git repository github.com/Versifiction/api-tictactrip, you have the server.js at the root and in the src/app.js the axios call – VersifiXion Nov 20 '18 at 20:04
  • I just saw your code in the fetching part on the client side is missing the full path you have to put it like this fetch(“http://localhost:5000/express_backend”) try now and cross your fingers man. – vitomadio Nov 20 '18 at 20:09