Difficulty sending cookies with fetch requests in JavaScript

Question

I have two separate services, a React single page application and an express API and I'm trying to communicate from the SPA to the API using the new fetch feature. Since the two services lie on different domains, I'm using a CORS middleware inside of the express application in order to make requests from the SPA to the API. I'm trying to make any fetch requests also include cookies so that way I can verify the cookies in my express application, for example

On the client side:

fetch('http://localhost:8000/hello', { 
    credentials: 'include', 
    mode: 'cors' 
}).then(/* ... */)

On the server side:

var app = express();

app.use(cors({ credentials: true });
app.use(cookieParser());

app.get('/hello', function (req, res) {
  // Try and find the cookies sent with the request
  console.log(req.cookies);

  res.status(200).json({ message: 'cookies received!' });
});

However, no matter what I try I still cannot access any cookies on the request object even though I can access them through using document.cookies.

An example cookie:

name: token
value: TOKEN_VALUE
domain: localhost
path: /
http: false
secure: false

Does anyone have suggestions on how to approach this? Any help would be greatly appreciated!

Answer 1

The fetch polyfill library you are using is not as of this writing up-to-spec. For credentials, it expects 'cors' to be the value as opposed to 'include'. I would edit my local copy of fetch.js on line 264 to accommodate the standard, submit a pull request, and be on the lookout for a better supported polyfill library.

See open issue: https://github.com/github/fetch/issues/109

https://github.com/github/fetch

https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch