-1

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?

strangeQuirks
  • 4,761
  • 9
  • 40
  • 67
  • 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 '19 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 '19 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 '19 at 20:49
  • and you're making a request from 3000 to 8000, right? – Kevin B Mar 26 '19 at 20:51
  • 1
    Sounds like you're configuring CORS on the wrong server. – Kevin B Mar 26 '19 at 20:51
  • Correct Keven B, 3000 to 8000. What would be the correct config though? Thats where I am lost. – strangeQuirks Mar 26 '19 at 20:51
  • You configured it using both setHeader and the cors middleware, choose one or the other. The former incorrectly handles OPTIONS requests and you can't use "\*" for credentialed requests, and with the latter you still have the "\*" problem. but, none of those things would cause the error you are seeing because the error is coming from a request to laravel, not node.js. – Kevin B Mar 26 '19 at 20:54

1 Answers1

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

n9iels
  • 867
  • 7
  • 21
  • 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 '19 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 '19 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 '19 at 21:04
  • ahhh ok i was completly on the wrong track then. Thanks! – strangeQuirks Mar 26 '19 at 21:05