Search code examples
javascriptreactjscookiesfetchbottle

Fetch is not sending secure cookie during cross domain POST request

I cannot get this fetch request to correctly send the cookie (session id that is successfully stored in the Chrome browsers application tab within cookies). The cookie is a python bottle created, beaker.session.id cookie that is marked secure.

enter image description here

I have my bottle server configured to deal with CORS requests and cookies with the following headers being returned:

Access-Control-Allow-Credentials →true
Access-Control-Allow-Headers →Origin, Accept, Content-Type, X-Requested-With, X-CSRF-Token, Authorization
Access-Control-Allow-Methods →PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin →http://localhost:3000

My javascript code is: 

 fetch("https://#.#.#.#/session-status", 
    {
        credentials: "include",
        method: "post",
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "id": id
        }),
    }).then(res => {
        return res.json()

What could be causing this issue? The preflight OPTIONS request succeeds with a 200 OK, but the POST request does not send the necessary headers which include the session id.

Solution

  • UPDATE:

    Turns out the issue was the SameSite: "Lax" part of the cookie. Bottle by default has SameSite: 'Lax" enabled, but you need to manually set it to None to not send the attribute. SameSite: "Lax" does not allow you to send unsafe requests (example: POST) from another domain according to this RFC in section 4.3.