14

Need to send a POST request with a JSON body. I have to use fetch.

Original code snippet, which worked:

headers = {'Content-Type': 'application/json'};
body = {path: 'path1'};
fetch(url, {
        method: 'post',
        headers: headers,
        body: JSON.stringify(body)
    })
        .then(response => {//do work});

Now I have to add Http-Only cookies for A&A.

This link has answer for that. Basically, have to add another parameter.

Afterwards updated code to: 

fetch(url, {
        credentials: 'include',
        method: 'post',
        headers: headers,
        body: JSON.stringify(body)
    })
        .then(response => {//do work});

Server doesn't see cookie in header.

Then tested the fetch by removing everything else:

fetch(url, {
        credentials: 'include',
        method: 'post',
    })
        .then(response => {//do work});

A&A part works i.e. Server now sees cookie in header. So, added the body back and didn't believe it would work:

body = {path: 'path1'};
fetch(url, {
        credentials: 'include',
        method: 'post',
        body: JSON.stringify(body)
    })
        .then(response => {//do work});

As expected, it didn't work. The Express server with CookieParser is showing that body is {}.

After added the Content-Type header:

body = {path: 'path1'};
fetch(url, {
        credentials: 'include',
        method: 'post',
        headers: {'Content-Type': 'application/json'}
        body: JSON.stringify(body)
    })
        .then(response => {//do work});

Now, the cookie has disappeared again. Guessing it's because of adding a new header, and replacing header generated by fetch, which includes cookie. Am I wrong?

While I was searching I found a similar question with no answer.

How should I proceed?

allenski
  • 1,652
  • 4
  • 23
  • 39
william
  • 7,284
  • 19
  • 66
  • 106
  • In the `headers` you can add a `'cookie' : '{cookie}'`. – myselfmiqdad Mar 12 '18 at 19:23
  • I am working in `React`, and I haven't found a way to read `Http-Only` cookies. That's why I am using `withCredentials` option. Please let me know if I am on the wrong track. – william Mar 12 '18 at 20:35
  • Actually, I just tested it using another library `axios`. Same situation. If I add the `body`, `cookie` is dropped. Is this a standard? If so, what is the workaround? – william Mar 12 '18 at 20:53
  • 1
    Are you getting any messages in the browser devtools console? Also please consider updating the question to show the response headers you’re getting back from the server in each case (as shown in the Network pane in devtools) — and ideally, also the request headers for each case. – sideshowbarker Mar 13 '18 at 00:38
  • 5
    I figured it out. It's the `OPTIONS` `preflight` request issue. Server needs to handle that. And the browser is sending only if there is a body or extra headers. If it is an empty request to get something from server, `OPTIONS` is not sent. – william Mar 19 '18 at 15:38
  • Hi, Http-Only Cookie are meant not be used by any Javascript in the frontend to avoid security issues. It's why your can't read it in React and you should let the browser handle it. – Weac Aug 29 '23 at 07:04

0 Answers0