title: Express + React: CSRF Cookie is undefined in production, works locally
body: <p>I'm hosting my express <strong>API on Heroku</strong> and my <strong>client on Netlify</strong>. When I try my signup route locally, my cookie is defined and the route works. However, when it is in production, the cookie always returns undefined and my API times out. </p>
  
  <p>Note that the cookie is being sent successfully from the backend. I’m able to view it in Dev Tools. Additionally, cookies,get() returns an empty object. </p>
  
  <p>I’m using Js-cookie.</p>
  
  <p>I'm using js-cookie in Gatsby. I'm using CSURF in express for the cookie. </p>
  
  <p>Backend: </p>
  
  <pre><code>//CSURF Config
  app.use(csurf({ cookie: true }));
  
  
  //Route that generates CSRF Cookie
  app.get("/getToken", (req, res) =&gt; {
      res.cookie("XSRF-TOKEN", req.csrfToken());
      res.end();
    });
  </code></pre>
  
  <p>Frontend: </p>
  
  <p>I'm including the entire sign up function. Note that this is two end point calls, one to retrieve the cookie, and one to create user record. </p>
  
  <pre><code>  userSignUp = async (email, password, resetForm) =&gt; {
      console.log("THis is a test of the emergency..")
      await fetch(process.env.API + "getToken", {
        mode: "cors", // no-cors, cors, *include
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "include", // include, *include, omit
        headers: {
          "content-type": "application/json",
        },
        method: "GET",
      })
      const token = Cookies.get("XSRF-TOKEN")
      alert(Cookies.get("XSRF-TOKEN"))
      const data = await fetch(process.env.API + "signUp", {
        body: JSON.stringify({ email: email, password: password }),
        mode: "cors", // no-cors, cors, *include
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "include", // include, *include, omit
        headers: {
          "content-type": "application/json",
          "csrf-token": token,
        },
        method: "POST",
      }).catch(error =&gt; this.setState({ isError: true }))
      if (data.ok) {
        console.log(data.ok)
        data.json().then(content =&gt; {
          console.log(content)
          this.props.changeAuth(content.authStatus)
          this.props.setCategories(content.user.categories)
          this.props.getEvents(content.user.events)
          resetForm()
        })
      } else {
        this.setState({
          isError: true,
        })
      }
    }
  </code></pre>