CODEWITHSUNDEEP
reactjsdjangocookiesdjango-rest-frameworkfetch
slinger
slinger

Reputation: 344

cookie not saved to the browser

soo i have the following fetch api

    const loginUser = async (e) => {
        e.preventDefault()
        const URL = "http://localhost:8000/auth/login/"
        let response = await fetch(URL, {
            // credentials: "include",
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                username: e.target.username.value,
                password: e.target.password.value,
            }),
        })
        if (response.status === 200) {
            console.log(response)
        } else {
            setLoginStatus("Invalid credentials")
            loginStatusRef.current.style.visibility = "visible"
        }
    }

This is the response of the above fetch

Access-Control-Allow-Origin http://localhost:3000
Allow POST, OPTIONS
Content-Length 37
Content-Type application/json
Cross-Origin-Opener-Policy same-origin
Date Thu, 25 Aug 2022 16:44:07 GMT
Referrer-Policy same-origin
Server WSGIServer/0.2 CPython/3.10.5
Set-Cookie
    csrftoken=Ou23mE46QwuuJi37bVgsZq19NbEAzaFh; expires=Thu, 24 Aug 2023 16:44:07 GMT; Max-Age=31449600; Path=/; SameSite=Lax
Set-Cookie
    sessionid=hyvv9uwwdi0m0blhb3ks6vzgtnyimxa6; expires=Thu, 08 Sep 2022 16:44:07 GMT; HttpOnly; Max-Age=1209600; Path=/; SameSite=Lax
Vary Accept, Cookie, Origin
X-Content-Type-Options nosniff
X-Frame-Options DENY

when i try to enable credentials:'include',i get the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/auth/login/. (Reason: CORS request did not succeed). Status code: (null)

i have already enabled cors in django


CORS_ALLOWED_ORIGINS = ['http://localhost:3000', ]

INSTALLED_APPS = [
    . . . 
    "corsheaders"
]

as you can see, a cookie sessionid is being returned but its not saved on browser. kindly help

Upvotes: 0

Views: 361

Answers (1)

Nabhag Motivaras
Nabhag Motivaras

Reputation: 134

  • Currently you have default behaviour that CORS-preflight requests must never include credentials.
  • Specify Access-Control-Allow-Credentials:true in response to indicate that the actual request can be made with credentials that should solve it.

The Access-Control-Allow-Credentials header indicates whether or not the response to the request can be exposed when the credentials flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials.so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content. Note that simple GET requests are not preflighted.

Upvotes: 1

Related Questions