Next.js with Axios Cookies throwing a 'Refused to Set Unsafe header 'Cookie' error'

[tepid whale]

where is your layouts been used ?

*Layout

[grave prairie]

In my _app.tsx file:

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Layout from "../components/Layout";

function MyApp({ Component, pageProps, cookies }: any) {
  // console.log("reload2");
  return (
    <Layout cookies={cookies}>
      <Component {...pageProps} />
    </Layout>
  );
}

MyApp.getInitialProps = async (context: any) => {
  // console.log("reload1");
  return { cookies: context.ctx.req.cookies };
};

export default MyApp;

[tepid whale]

right and the cookies is unsafe :/

something todo with the backend

https://github.com/openai/openai-node/issues/6

same problem ur hving

this one has more info
https://github.com/jhen0409/react-native-debugger/issues/96

[grave prairie]

Ah alright, however I also saw this:

https://stackoverflow.com/questions/50256737/cookie-in-header-javascript-error-refused-to-set-unsafe-header-cookie

Which I thought suggested that you just couldn't? But then that didn't explain why it subseqeuntly did execute it.

[tepid whale]

I see, see if that worked

[grave prairie]

Ahh, okay so does that suggest that XHR sets it as a forbidden header to change?

[tepid whale]

What they are saying, anyone can put cookie and make a request, they have change it where you need to state ur request as what was said in the stack overflow

[grave prairie]

Alright, thanks - sorry for being a bit of a pain.

@tepid whale Any ideas about the second part of my issue?

However, I am also having an issue where despite the user successfully logging to the console in my Sidebar component, it's just passing undefined as the prop. Any idea why?

return (
    <div>
      <Sidebar user={user} loading={isLoading}></Sidebar>
      <main>{children}</main>
    </div>
  );

const Sidebar = ({ user, loading }: any) => {
  console.log(loading, user);

[tepid whale]

hahah ur all good man, ur not a pain 🙂

ur learning 🙂

[grave prairie]

:)

[tepid whale]

alright having a look

ur not getting the login, because that request failed. as the request failed ur getting null or underfind

 axios
      .get("http://localhost:4000/api/auth/status", { withCredentials: true, headers: { Cookie: `connect.sid=${cookies["connect.sid"]}` } })
      .then((res) => res.data)
      .then((data) => {
        console.log(data);
        setUser(user);
        setLoading(false);
      });
  }, []);

this has not catch statement

[grave prairie]

Ahh, alright - so it is related.

But, then so later down when the request does succeed despite the 'Refused to set unsafe header "Cookie"' errror, why is it not updating the component?

[tepid whale]

 axios
      .get("http://localhost:4000/api/auth/status", { withCredentials: true, headers: { Cookie: `connect.sid=${cookies["connect.sid"]}` } })
      .then((res) => res.data)
      .then((data) => {
        console.log(data);
        setUser(user);
        setLoading(false);
      }).
      catch(err => console.log(err))
  }, []);

[grave prairie]

thanks,

[tepid whale]

all good 🙂

or you can do this

[grave prairie]

weird, that catch block isn't catching any errors?

[tepid whale]

 axios
      .get("http://localhost:4000/api/auth/status", { withCredentials: true, headers: { Cookie: `connect.sid=${cookies["connect.sid"]}` } })
      .then((res) => res.data)
      .then((data) => {
        console.log(data);
        setUser(user);
        setLoading(false);
      })
      .catch(err => () => {
        console.log(err)
        setUser(false)
        setLoading(false);
      })
  }, []);

[grave prairie]

? Nothing's going into the catch block anyway though?

It kinda looks like the request isn't failing, but that wouldn't explain why it's throwing the refused to set cookie error.

@tepid whale ?

[tepid whale]

Sorry I was thinking

is it try or catch

[grave prairie]

ahh, sorry lol

[tepid whale]

no it is catch

 axios
      .get("http://localhost:4000/api/auth/status", { withCredentials: true, headers: { Cookie: `connect.sid=${cookies["connect.sid"]}` } })
      .then((res) => res.data)
        console.log(res.data)
      .then((data) => {
        console.log(data);
        setUser(user);
        setLoading(false);
      })
      .catch(err => () => {
        console.log(err)
        setUser(false)
        setLoading(false);
      })
  }, []);

copy that and see what the console log gives u

[grave prairie]

Made some slight adjustments:

    axios
      .get("http://localhost:4000/api/auth/status", { withCredentials: true, headers: { Cookie: `connect.sid=${cookies["connect.sid"]}` } })
      .then((res) => {
        console.log(res.data);
      })
      .then((data) => {
        console.log(data);
        setUser(user);
        setLoading(false);
      })
      .catch((err) => () => {
        console.log(err);
        // setUser(false);
        setLoading(false);
      });
  }, []);

As setUser(false) was throwing a 'Cannot set type to false'

[tepid whale]

ohhhhhh this is for a roblox server

is this ur API

[grave prairie]

ah,

lmao ive just fixed it

[tepid whale]

    axios
      .get("http://localhost:4000/api/auth/status", { withCredentials: true, headers: { Cookie: `connect.sid=${cookies["connect.sid"]}` } })
      .then((res) => {
        console.log('${res.data} ${data} this data number 1 ');
      })
      .then((data) => {
        console.log('${data} this data number 2 ');
        setUser(user);
        setLoading(false);
      })
      .catch((err) => () => {
        console.log(err);
        // setUser(false);
        setLoading(false);
      });
  }, []);

[grave prairie]

so sorry for taking so much ofr your time, well still havent solved the first issue, but

.then((data) => {
        console.log("----");
        console.log(data);
        setUser(data);
        setLoading(false);
      })

I had it set to setUser(user)

[tepid whale]

oh u worked it out

[grave prairie]

so it was just setting itself, with its undefined value

thank you so much for your help, going to give those stack overflow articles a read to sort the cookie issue

thank you so much

[tepid whale]

ohhh yes that does make sense haha