question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sending cookie with fetch is working but not with axios

See original GitHub issue

First, here is my cookie in my chrome.

Name               Value      Domain          Path      Expires    HTTP    Secure
JSESSIONID          xx        x.sss.com         /          N/A      true     true

This is my axios code. I didn’t see the cookie on my server log.

const request = axios.create({
  baseURL: 'https://x.sss.com',
  headers: {
    'Content-Type': 'application/json'
  },
  withCredentials: true,
  timeout: 300000,
  transformRequest: [function (data) {
    return JSON.stringify(data)
  }]
})

request({
  url: '/api/post',
  method: 'post',
  data: [1,2,3]
})

I can get my cookie with fetch

fetch('https://x.sss.com/api/post', {
  'method': 'POST',
  'body': JSON.stringify([1,2,3]),
  'credentials': 'include',
  'mode': 'cors',
  'headers': {
    'accept': 'application/json, text/plain, */*', 'content-type': 'application/json'
  }
})

This is the http response headers.

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: x-requested-with,content-type
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin: http://127.0.0.1:1288
Access-Control-Max-Age: 3600
Connection: keep-alive
Content-Type: application/json;charset=UTF-8
Date: Tue, 14 May 2019 01:49:14 GMT
Server: nginx/1.12.2
Transfer-Encoding: chunked

I’m very confused.😢 Could you help me please ?

Environment:

  • Axios Version: 0.18.0
  • OS: OSX 10.14.3
  • Browser: Chrome
  • Browser Version: 74.0.3729.131
  • Additional Library Versions: Vue 2.6.10

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:6
  • Comments:10

github_iconTop GitHub Comments

4reactions
Lucien-Xcommented, Jun 3, 2021

I have a similar issue. I’m adding a cookie by using the withCredentials option, but when adding a transformRequest option to set an additional header, the cookie will not show up on the request any more.

same issue here. when initiating cross-site requests, axios seems to drop all the credentials, and only keep the headers I modified, even when the ‘withCredentials’ option is on.

const axiosInstance = axios.create({
    withCredentials: true,/
    headers: {
      'x-xsrf-token':  someCsrfToken,
    }
  });

without headers option:

image

with headers option:

image

2reactions
js-writercommented, Aug 21, 2022

Try to add withCredentials: true to the request which create cookie in your server. For example when cookie is created when user is try to login, than add flag withCredentials to login request.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cookies are stored with fetch but not with axios - Stack Overflow
Okay, I found solution. I moved data which I want to send to the Back-End to second argument in axios.post method and now...
Read more >
How to Pass Cookies with Fetch or Axios Requests - Sabe.io
If you want to pass cookies with this request, you can do so by passing the credentials option to the fetch request.
Read more >
Pass cookies with axios or fetch requests - Code with Hugo
When sending requests from client-side JavaScript, by default cookies are not passed. By default, fetch won't send or receive any c.
Read more >
axios set cookie not working | The AI Search Engine You Control
probably cookie is 'httpOnly', which means client side javascript can not read it. Therefore it is not showing in chrome cookie section. test...
Read more >
Axios vs. fetch(): Which is best for making HTTP requests?
Axios is not always an ideal solution; depending on your needs, there are sometimes better options for making HTTP requests. The Fetch API ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found