12

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!

4
  • Is it just a typo that you have no closing quote after credentials: 'include? Also, do you have a JSFiddle or Pnkr? Commented Apr 15, 2015 at 23:13
  • Yeah, sorry! Just a typo. And sadly no because it involves a server-side component. Commented Apr 15, 2015 at 23:21
  • Can you share your client side code. I can create my own server. Commented Apr 16, 2015 at 0:30
  • The client side code in question mirrors the fetch request that I posted in the question. The request is being fulfilled and I am able to receive responses from my server, but no cookies are being passed to the server. Commented Apr 16, 2015 at 0:39

1 Answer 1

9

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

Sign up to request clarification or add additional context in comments.

5 Comments

There are already pull requests on the repo to fix the issue: github.com/github/fetch/pull/113/files
Hi, i had the same issue. changing to 'cors' instead of 'include' didnt solve the problem for me :(
I still face the same issue even after using credential as include or same-orgin after using whatg-fetch 2.0.3.
I must be on the latest version, because 'cors' wasn't valid and fetch threw and error. This is the spec and I don't see 'cors' as an option? developer.mozilla.org/en-US/docs/Web/API/Request/credentials

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.