CODEWITHSUNDEEP
reactjsreact-reduxcorsaxios
Fred Rabelo
Fred Rabelo

Reputation: 27

AXIOS CORS PROBLEM. Server has "Access-Control-Allow-Origin: *" but Axios can't see it. why?

I have a CORS problem with axios.

The server is fine, I am sending Access-Control-Allow-Origin: * on all routes.

I can even login using the same backend, but for some reason logout is not working, axios can't see the headers.

I made a video: https://youtu.be/vHfyk8BteLA

Can somebody explain that? When I check the network with a GET on the browser the header is there, but when the get is triggered by axios the header vanishes.

logout = () => {

        const token = window.localStorage.getItem('jwt_access_token');
        const request = axios.post('https://localhost/vintiapi/public/api/logout?token='+token);

        this.setSession(null);

        request.then(response => {

            console.log('logout');

        });
};

Upvotes: 0

Views: 436

Answers (1)

cbr
cbr

Reputation: 13660

The error message suggests that it's the preflight request that's not getting the header. If you're using the cors module, you'll need to handle the OPTIONS request yourself:

// From: https://expressjs.com/en/resources/middleware/cors.html#enabling-cors-pre-flight
var express = require('express')
var cors = require('cors')
var app = express()

app.options('/products/:id', cors()) // enable pre-flight request for DELETE request
app.del('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Or you can enable it for all preflight requests:

app.options('*', cors())

Upvotes: 2

Related Questions