Get Cookie from axios response using cors on the server side

16,816

Access-Control-Allow-Credentials: true (which is what 'controls' whether cookies and other 'credentials' can be used in a CORS request) is not compatible with Access-Control-Allow-Origin: * - you need to specify the exact origin from which the request is coming in the ACAO response header if you want to use cookies.

Basically, extract the Origin request header and ensure that it is 'mirrored back' in the Access-Control-Allow-Origin response header. In your case, it will probably be https://localhost:8080, but you shouldn't hardcode it - always extract it from the Origin request header.

So the answer should be as simple as specifying the value of the Origin request header in the server.use.cors.origin value.

Share:
16,816
Rokko_11
Author by

Rokko_11

Updated on June 05, 2022

Comments

  • Rokko_11
    Rokko_11 almost 2 years

    I run Vue.js 2.5.2 and axios 0.17.1 against a Node.js server using express 4.16.2 and cors 2.8.4.

    When I do a login

    axios.post('/login', {"username": "a", "password": "b").then((response) => {
        console.log(response.headers['set-cookie']);
    }
    

    I get undefined as output. On other topics they told to set the Access-Control-Expose-Headers: Access-Token, Uid. I did this in my server-config like this:

    const express = require('express'),
    cookieParser = require('cookie-parser'),
    cors = require('cors'),
    bodyParser = require('body-parser'),
    const server = express();
    
    server.use(cookieParser());
    server.use(bodyParser.json({limit: '50mb'}));
    server.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
    
    server.use(cors({
      "origin": "*", 
      "credentials": true,
      "exposedHeaders": ["Uid", "Access-Token"]
      // same for "Uid, Access-Token"
      // Adding "set-cookie" to this list did not work.
    }));
    

    I can see in the Chrome Developer Toolbar, that Access-Control-Expose-Headers-Option is set in the OPTION-Request and the POST-Request. Also in the POST-Request I can see the set-cookie-header. But the log of response.headers['set-cookie'] is still undefined.


    Edit:

    This behavior is in the development-mode: Server is running on localhost:3000, client is running on localhost:8080.

    When I build the vue.js-client for production mode so that both runs on localhost:3000, it works.


    Any ideas?

    Thank you!