Express CORS : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is...
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-Originheader 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
reactjs server cors
asked Nov 20 '18 at 18:51
VersifictionVersifiction
507
add a comment |
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-Originheader 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
reactjs server cors
asked Nov 20 '18 at 18:51
VersifictionVersifiction
507
You use cors npm package and send headers manually, I guess you need to choose only 1 way to go
– Alex
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 ?
– Versifiction
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 instead?
– Alex
Nov 20 '18 at 19:05
tryres.set()orres.setHeader()instead stackoverflow.com/questions/40840852/…
– Alex
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
– Versifiction
Nov 20 '18 at 19:19
add a comment |
0
0
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-Originheader 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
reactjs server cors
asked Nov 20 '18 at 18:51
VersifictionVersifiction
507
I'm doing a project in React.js where I have to get API's datas and I got the
No
Access-Control-Allow-Originheader 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
reactjs server cors
reactjs server cors
asked Nov 20 '18 at 18:51
VersifictionVersifiction
507
asked Nov 20 '18 at 18:51
VersifictionVersifiction
507
edited Nov 20 '18 at 18:56
Versifiction
asked Nov 20 '18 at 18:51
VersifictionVersifiction
507
asked Nov 20 '18 at 18:51
VersifictionVersifiction
507
asked Nov 20 '18 at 18:51
VersifictionVersifiction
507
507
You use cors npm package and send headers manually, I guess you need to choose only 1 way to go
– Alex
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 ?
– Versifiction
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 instead?
– Alex
Nov 20 '18 at 19:05
tryres.set()orres.setHeader()instead stackoverflow.com/questions/40840852/…
– Alex
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
– Versifiction
Nov 20 '18 at 19:19
add a comment |
You use cors npm package and send headers manually, I guess you need to choose only 1 way to go
– Alex
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 ?
– Versifiction
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 instead?
– Alex
Nov 20 '18 at 19:05
tryres.set()orres.setHeader()instead stackoverflow.com/questions/40840852/…
– Alex
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
– Versifiction
Nov 20 '18 at 19:19
You use cors npm package and send headers manually, I guess you need to choose only 1 way to go
– Alex
Nov 20 '18 at 19:00
You use cors npm package and send headers manually, I guess you need to choose only 1 way to go
– Alex
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 ?
– Versifiction
Nov 20 '18 at 19:03
@Alex even when I tried one way, it wasn't working, but do you agree the fact that everything is OK in my code ?
– Versifiction
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 instead?– Alex
Nov 20 '18 at 19:05
res.header() semantically looks ok, but I don't see it in express doc. Can you try one of this ways instead?– Alex
Nov 20 '18 at 19:05
try
res.set() or res.setHeader() instead stackoverflow.com/questions/40840852/…– Alex
Nov 20 '18 at 19:09
try
res.set() or res.setHeader() instead stackoverflow.com/questions/40840852/…– Alex
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
– Versifiction
Nov 20 '18 at 19:19
@Alex ok i'm trying with cors (the status is now 200 but still get the error message) then I'll try your solution
– Versifiction
Nov 20 '18 at 19:19
add a comment |
1 Answer
1
active
oldest
votes
1
In your server change this line:
app.use(cors({origin:"http://localhost:3000"}));
Or whatever your host path is.
answered Nov 20 '18 at 19:07
vitomadiovitomadio
560110
ok, the status is now 200, but still have the error issue hmm
– Versifiction
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 haveconst 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' }); });
– Versifiction
Nov 20 '18 at 19:28
Could you share your client side code?
– vitomadio
Nov 20 '18 at 19:48
@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
– Versifiction
Nov 20 '18 at 20:04
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399652%2fexpress-cors-no-access-control-allow-origin-header-is-present-on-the-request%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
In your server change this line:
app.use(cors({origin:"http://localhost:3000"}));
Or whatever your host path is.
answered Nov 20 '18 at 19:07
vitomadiovitomadio
560110
ok, the status is now 200, but still have the error issue hmm
– Versifiction
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 haveconst 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' }); });
– Versifiction
Nov 20 '18 at 19:28
Could you share your client side code?
– vitomadio
Nov 20 '18 at 19:48
@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
– Versifiction
Nov 20 '18 at 20:04
|
show 2 more comments
1
In your server change this line:
app.use(cors({origin:"http://localhost:3000"}));
Or whatever your host path is.
answered Nov 20 '18 at 19:07
vitomadiovitomadio
560110
ok, the status is now 200, but still have the error issue hmm
– Versifiction
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 haveconst 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' }); });
– Versifiction
Nov 20 '18 at 19:28
Could you share your client side code?
– vitomadio
Nov 20 '18 at 19:48
@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
– Versifiction
Nov 20 '18 at 20:04
|
show 2 more comments
1
1
1
In your server change this line:
app.use(cors({origin:"http://localhost:3000"}));
Or whatever your host path is.
answered Nov 20 '18 at 19:07
vitomadiovitomadio
560110
In your server change this line:
app.use(cors({origin:"http://localhost:3000"}));
Or whatever your host path is.
answered Nov 20 '18 at 19:07
vitomadiovitomadio
560110
edited Nov 20 '18 at 19:09
answered Nov 20 '18 at 19:07
vitomadiovitomadio
560110
answered Nov 20 '18 at 19:07
vitomadiovitomadio
560110
answered Nov 20 '18 at 19:07
vitomadiovitomadio
560110
560110
ok, the status is now 200, but still have the error issue hmm
– Versifiction
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 haveconst 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' }); });
– Versifiction
Nov 20 '18 at 19:28
Could you share your client side code?
– vitomadio
Nov 20 '18 at 19:48
@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
– Versifiction
Nov 20 '18 at 20:04
|
show 2 more comments
ok, the status is now 200, but still have the error issue hmm
– Versifiction
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 haveconst 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' }); });
– Versifiction
Nov 20 '18 at 19:28
Could you share your client side code?
– vitomadio
Nov 20 '18 at 19:48
@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
– Versifiction
Nov 20 '18 at 20:04
ok, the status is now 200, but still have the error issue hmm
– Versifiction
Nov 20 '18 at 19:18
ok, the status is now 200, but still have the error issue hmm
– Versifiction
Nov 20 '18 at 19:18
You can get rid of all your res.header stuff
– vitomadio
Nov 20 '18 at 19:25
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' }); });– Versifiction
Nov 20 '18 at 19:28
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' }); });– Versifiction
Nov 20 '18 at 19:28
Could you share your client side code?
– vitomadio
Nov 20 '18 at 19:48
Could you share your client side code?
– vitomadio
Nov 20 '18 at 19:48
@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
– Versifiction
Nov 20 '18 at 20:04
@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
– Versifiction
Nov 20 '18 at 20:04
|
show 2 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399652%2fexpress-cors-no-access-control-allow-origin-header-is-present-on-the-request%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You use cors npm package and send headers manually, I guess you need to choose only 1 way to go
– Alex
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 ?
– Versifiction
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 instead?– Alex
Nov 20 '18 at 19:05
try
res.set()orres.setHeader()instead stackoverflow.com/questions/40840852/…– Alex
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
– Versifiction
Nov 20 '18 at 19:19