Styjun

In syntax, why cannot we say things like "he took walked at the park"? but can say "he took a walk at the park"?

Does Ubuntu reduces battery life?

If you inherit a Roth 401(k), is it taxed?

Story about separate individuals coming together to make some supernatural universe power

Alternatives to minimizing loss in regression

Why does aggregate initialization not work anymore since C++20 if a constructor is explicitly defaulted or deleted?

Was the Psych theme song written for the show?

Do the books ever say oliphaunts aren’t elephants?

What is the German equivalent of the proverb 水清ければ魚棲まず (if the water is clear, fish won't live there)?

Why did I lose on time with 3 pawns vs Knight. Shouldn't it be a draw?

Is there an antonym (a complementary antonym) for "spicy" or "hot" regarding food (I DO NOT mean "seasoned", but "hot")?

What do I lose by going Paladin 17 / Warlock 3, instead of taking 1 additional level or 1 fewer level in Warlock?

Wrapping IMemoryCache with SemaphoreSlim

Argand formula and more for quaternions?

how to understand the error info "Illegal parameter number in definition of reserved@a. ...t2+cdots+sqrt2}}_n项 , cdots 收敛.$}"

Why does Canada require bilingualism in a lot of federal government posts?

How to innovate in OR

Should I intervene when a colleague in a different department makes students run laps as part of their grade?

Why put copper in between battery contacts and clamps?

Why would an invisible personal shield be necessary?

Would people understand me speaking German all over Europe?

Why did Windows 95 crash the whole system but newer Windows only crashed programs?

What is the reason for cards stating "Until end of turn, you don't lose this mana as steps and phases end"?

Convert graph format for Mathematica graph functions

ExpresJS Cors issue: No 'Access-Control-Allow-Origin' header is present on the requested resource [duplicate]

How does Access-Control-Allow-Origin header work?Access-Control-Allow-Origin Multiple Origin Domains?XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-OriginHow does Access-Control-Allow-Origin header work?No 'Access-Control-Allow-Origin' - Node / Apache Port IssueCORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is trueWhy does my JavaScript code get a “No 'Access-Control-Allow-Origin' header is present on the requested resource” error when Postman does not?Javascript - No 'Access-Control-Allow-Origin' header is present on the requested resourceNo 'Access-Control-Allow-Origin' header is present on the requestedResponse to preflight request doesn't pass access control checkNo 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

-1

0

This question already has an answer here:

• 
  How does Access-Control-Allow-Origin header work?
  
  13 answers
  
  

From what I have researched, my config should be fine and have no problems with cors. When I do a post request using axios from localhost:3000 to my api on localhost:8000, I see the following error message:

Access to XMLHttpRequest at 'http://localhost:8000/api/tags/' from
origin 'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.

So here is my server.js config setup:

const express = require('express');
const next = require('next');
const cors = require('cors');
const bodyParser = require('body-parser');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';

const app = next( dev );
const handle = app.getRequestHandler();

app.prepare().then(() => 
 const server = express();

 server.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, PATCH, DELETE');
 next();
 );

 server.use(bodyParser.json()); // support json encoded bodies
 server.use(bodyParser.urlencoded( extended: true )); // support encoded bodies

 server.use(cors(
 origin: '*',
 credentials: true,
 ));

 server.all('*', (req, res) => 
 return handle(req, res);
 );

 server.listen(port, (err) => 
 if (err) throw err;
 console.log(`> Ready on http://localhost:$port`);
 );
);

I am basically trying to do a request from my next.js app thats on port 3000 to my laravel server/api on port 8000.
Can anyone see my problem?

node.js express cors axios

share|improve this question

edited Mar 26 at 20:50

strangeQuirks

asked Mar 26 at 20:40

strangeQuirksstrangeQuirks

95633 gold badges1010 silver badges2121 bronze badges

marked as duplicate by sideshowbarker cors
Users with the  cors badge can single-handedly close cors questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 27 at 4:49

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In your code snippet you use port 3000, but this snipped looks like a server to me. However, you are saying that your API is on port 8000. Can you clarify it a bit?
  
  – n9iels
  Mar 26 at 20:46
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You specified OPTIONS as a valid request method, but you didn't properly configure your server to handle OPTIONS requests. Is the request you are sending requiring a preflight? Additionally, if you are using cors middleware, you don't need to set the headers yourself. The cors middleware will do that for you, you simply need to configure it using the options.
  
  – Kevin B
  Mar 26 at 20:49
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  well my express js server is on port 3000 and i have a laravel server started on port 8000.
  
  – strangeQuirks
  Mar 26 at 20:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  and you're making a request from 3000 to 8000, right?
  
  – Kevin B
  Mar 26 at 20:51
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Sounds like you're configuring CORS on the wrong server.
  
  – Kevin B
  Mar 26 at 20:51
  

  
  
  
  

 | 
show 2 more comments

-1

0

This question already has an answer here:

• 
  How does Access-Control-Allow-Origin header work?
  
  13 answers
  
  

From what I have researched, my config should be fine and have no problems with cors. When I do a post request using axios from localhost:3000 to my api on localhost:8000, I see the following error message:

Access to XMLHttpRequest at 'http://localhost:8000/api/tags/' from
origin 'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.

So here is my server.js config setup:

const express = require('express');
const next = require('next');
const cors = require('cors');
const bodyParser = require('body-parser');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';

const app = next( dev );
const handle = app.getRequestHandler();

app.prepare().then(() => 
 const server = express();

 server.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, PATCH, DELETE');
 next();
 );

 server.use(bodyParser.json()); // support json encoded bodies
 server.use(bodyParser.urlencoded( extended: true )); // support encoded bodies

 server.use(cors(
 origin: '*',
 credentials: true,
 ));

 server.all('*', (req, res) => 
 return handle(req, res);
 );

 server.listen(port, (err) => 
 if (err) throw err;
 console.log(`> Ready on http://localhost:$port`);
 );
);

I am basically trying to do a request from my next.js app thats on port 3000 to my laravel server/api on port 8000.
Can anyone see my problem?

node.js express cors axios

share|improve this question

edited Mar 26 at 20:50

strangeQuirks

asked Mar 26 at 20:40

strangeQuirksstrangeQuirks

95633 gold badges1010 silver badges2121 bronze badges

marked as duplicate by sideshowbarker cors
Users with the  cors badge can single-handedly close cors questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 27 at 4:49

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In your code snippet you use port 3000, but this snipped looks like a server to me. However, you are saying that your API is on port 8000. Can you clarify it a bit?
  
  – n9iels
  Mar 26 at 20:46
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You specified OPTIONS as a valid request method, but you didn't properly configure your server to handle OPTIONS requests. Is the request you are sending requiring a preflight? Additionally, if you are using cors middleware, you don't need to set the headers yourself. The cors middleware will do that for you, you simply need to configure it using the options.
  
  – Kevin B
  Mar 26 at 20:49
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  well my express js server is on port 3000 and i have a laravel server started on port 8000.
  
  – strangeQuirks
  Mar 26 at 20:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  and you're making a request from 3000 to 8000, right?
  
  – Kevin B
  Mar 26 at 20:51
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Sounds like you're configuring CORS on the wrong server.
  
  – Kevin B
  Mar 26 at 20:51
  

  
  
  
  

 | 
show 2 more comments

This question already has an answer here:

• 
  How does Access-Control-Allow-Origin header work?
  
  13 answers
  
  

From what I have researched, my config should be fine and have no problems with cors. When I do a post request using axios from localhost:3000 to my api on localhost:8000, I see the following error message:

Access to XMLHttpRequest at 'http://localhost:8000/api/tags/' from
origin 'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.

So here is my server.js config setup:

const express = require('express');
const next = require('next');
const cors = require('cors');
const bodyParser = require('body-parser');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';

const app = next( dev );
const handle = app.getRequestHandler();

app.prepare().then(() => 
 const server = express();

 server.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, PATCH, DELETE');
 next();
 );

 server.use(bodyParser.json()); // support json encoded bodies
 server.use(bodyParser.urlencoded( extended: true )); // support encoded bodies

 server.use(cors(
 origin: '*',
 credentials: true,
 ));

 server.all('*', (req, res) => 
 return handle(req, res);
 );

 server.listen(port, (err) => 
 if (err) throw err;
 console.log(`> Ready on http://localhost:$port`);
 );
);

I am basically trying to do a request from my next.js app thats on port 3000 to my laravel server/api on port 8000.
Can anyone see my problem?

node.js express cors axios

share|improve this question

edited Mar 26 at 20:50

strangeQuirks

asked Mar 26 at 20:40

strangeQuirksstrangeQuirks

95633 gold badges1010 silver badges2121 bronze badges

const express = require('express');
const next = require('next');
const cors = require('cors');
const bodyParser = require('body-parser');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';

const app = next( dev );
const handle = app.getRequestHandler();

app.prepare().then(() => 
 const server = express();

 server.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, PATCH, DELETE');
 next();
 );

 server.use(bodyParser.json()); // support json encoded bodies
 server.use(bodyParser.urlencoded( extended: true )); // support encoded bodies

 server.use(cors(
 origin: '*',
 credentials: true,
 ));

 server.all('*', (req, res) => 
 return handle(req, res);
 );

 server.listen(port, (err) => 
 if (err) throw err;
 console.log(`> Ready on http://localhost:$port`);
 );
);

share|improve this question

edited Mar 26 at 20:50

strangeQuirks

asked Mar 26 at 20:40

strangeQuirksstrangeQuirks

95633 gold badges1010 silver badges2121 bronze badges

share|improve this question

edited Mar 26 at 20:50

strangeQuirks

asked Mar 26 at 20:40

strangeQuirksstrangeQuirks

95633 gold badges1010 silver badges2121 bronze badges

asked Mar 26 at 20:40

strangeQuirksstrangeQuirks

95633 gold badges1010 silver badges2121 bronze badges

asked Mar 26 at 20:40

strangeQuirksstrangeQuirks

95633 gold badges1010 silver badges2121 bronze badges

1 Answer
1

active

oldest

votes

0

You misunderstood the concept of CORS headers a bit. These headers need to be specified on the server side, you set them on the client (NodeJs) side.

So if you set the headers on the Laravel application in your case it should be fine. I am not into Laravel, but I am pretty sure there is a build in function or package that handles that for you. I also advise you to read a bit more about CORS, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

share|improve this answer

answered Mar 26 at 20:52

n9ielsn9iels

40333 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I see, then I was completly wrong, i thought cause the issue states headers, that my nodejs app needs to set the correct headers to allow it to access my laravel api. I shall go back and learn :)
  
  – strangeQuirks
  Mar 26 at 20:57
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So basically my nodejs server can send whatever headers it wants to right? but the laravel app needs to be configured to accept the nodejs request @n9iels?
  
  – strangeQuirks
  Mar 26 at 20:59
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes, like that. To be a little more accurate, the Laravel application tells your browser that it is allowed to perform a request to him with the specified headers.
  
  – n9iels
  Mar 26 at 21:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ahhh ok i was completly on the wrong track then. Thanks!
  
  – strangeQuirks
  Mar 26 at 21:05
  

  
  
  
  

add a comment | 

0

You misunderstood the concept of CORS headers a bit. These headers need to be specified on the server side, you set them on the client (NodeJs) side.

So if you set the headers on the Laravel application in your case it should be fine. I am not into Laravel, but I am pretty sure there is a build in function or package that handles that for you. I also advise you to read a bit more about CORS, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

share|improve this answer

answered Mar 26 at 20:52

n9ielsn9iels

40333 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I see, then I was completly wrong, i thought cause the issue states headers, that my nodejs app needs to set the correct headers to allow it to access my laravel api. I shall go back and learn :)
  
  – strangeQuirks
  Mar 26 at 20:57
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So basically my nodejs server can send whatever headers it wants to right? but the laravel app needs to be configured to accept the nodejs request @n9iels?
  
  – strangeQuirks
  Mar 26 at 20:59
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes, like that. To be a little more accurate, the Laravel application tells your browser that it is allowed to perform a request to him with the specified headers.
  
  – n9iels
  Mar 26 at 21:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ahhh ok i was completly on the wrong track then. Thanks!
  
  – strangeQuirks
  Mar 26 at 21:05
  

  
  
  
  

add a comment | 

0

You misunderstood the concept of CORS headers a bit. These headers need to be specified on the server side, you set them on the client (NodeJs) side.

So if you set the headers on the Laravel application in your case it should be fine. I am not into Laravel, but I am pretty sure there is a build in function or package that handles that for you. I also advise you to read a bit more about CORS, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

share|improve this answer

answered Mar 26 at 20:52

n9ielsn9iels

40333 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I see, then I was completly wrong, i thought cause the issue states headers, that my nodejs app needs to set the correct headers to allow it to access my laravel api. I shall go back and learn :)
  
  – strangeQuirks
  Mar 26 at 20:57
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So basically my nodejs server can send whatever headers it wants to right? but the laravel app needs to be configured to accept the nodejs request @n9iels?
  
  – strangeQuirks
  Mar 26 at 20:59
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes, like that. To be a little more accurate, the Laravel application tells your browser that it is allowed to perform a request to him with the specified headers.
  
  – n9iels
  Mar 26 at 21:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ahhh ok i was completly on the wrong track then. Thanks!
  
  – strangeQuirks
  Mar 26 at 21:05
  

  
  
  
  

add a comment | 

You misunderstood the concept of CORS headers a bit. These headers need to be specified on the server side, you set them on the client (NodeJs) side.

So if you set the headers on the Laravel application in your case it should be fine. I am not into Laravel, but I am pretty sure there is a build in function or package that handles that for you. I also advise you to read a bit more about CORS, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

share|improve this answer

answered Mar 26 at 20:52

n9ielsn9iels

40333 silver badges1111 bronze badges

share|improve this answer

answered Mar 26 at 20:52

n9ielsn9iels

40333 silver badges1111 bronze badges

answered Mar 26 at 20:52

n9ielsn9iels

40333 silver badges1111 bronze badges

answered Mar 26 at 20:52

n9ielsn9iels

40333 silver badges1111 bronze badges