Axios not sending cookies in the headers, even using withCredentials: true | Backend FastAPI

Question

My axios config

Using postman I get the cookie just fine, so it's an axios problem.

const api = axios.create({
  baseURL: 'http://localhost:8000/',
  withCredentials: true,
  headers: { crossDomain: true, 'Content-Type': 'application/json' },
})

export default boot(({app}) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
})

export { axios, api }

  const response = await api.get(
    '',
  )

What am I missing here?

Answer 1

You can't send cookie of localhost any other hostname or ip you can send just different subdomain. You need same site parameter. https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#samesite_attribute