javascript - HttpOnly cookie is not sent from next js getServerSideProps using axios (withCredentials: true) - Stack Overflow

So here's my problem. I have a dasboard page and i have programs page. The problem is on the programs page where i have SSR, because on dashboard page i call my saga on client-side and everything works like it should work.

Client side: The client sends the httpOnly cookie to my backend server and data is fetched from my backend for the use.

Server side: However for some reason when i call the same saga inside getServerSideProps of course {withCredentials: true} it doesn't send the token to my backend for some reason. Inside the req object i get from getServerSideProps inside req.headers.cookie i see the cookie, but it doesn't send it. So what's the solution to manually add it when calling it form getServerSideProps or?

The code:

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ store, req }) => {
    store.dispatch(fetchprogramsRequest(req.url));
    const cookies = cookie.parse(req.headers.cookie);
    console.log('COOKIES', cookies); // HERE you can see the cookies

    // end the saga
    store.dispatch(END);
    await store.sagaTask.toPromise();
  }
);


The axios inside the saga:
const res = yield axios.get(url, { withCredentials: true });
This is called in both cases (client-side: works, server-side: doesn't)

So here's my problem. I have a dasboard page and i have programs page. The problem is on the programs page where i have SSR, because on dashboard page i call my saga on client-side and everything works like it should work.

Client side: The client sends the httpOnly cookie to my backend server and data is fetched from my backend for the use.

Server side: However for some reason when i call the same saga inside getServerSideProps of course {withCredentials: true} it doesn't send the token to my backend for some reason. Inside the req object i get from getServerSideProps inside req.headers.cookie i see the cookie, but it doesn't send it. So what's the solution to manually add it when calling it form getServerSideProps or?

The code:

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ store, req }) => {
    store.dispatch(fetchprogramsRequest(req.url));
    const cookies = cookie.parse(req.headers.cookie);
    console.log('COOKIES', cookies); // HERE you can see the cookies

    // end the saga
    store.dispatch(END);
    await store.sagaTask.toPromise();
  }
);


The axios inside the saga:
const res = yield axios.get(url, { withCredentials: true });
This is called in both cases (client-side: works, server-side: doesn't)

• javascript
• reactjs
• express
• axios
• next.js

Share Improve this question Follow asked Aug 10, 2020 at 20:54 Blagoj PetrovBlagoj Petrov 29511 gold badge66 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I believe the cookie is stored on the client side (browser).

May be this can work, as long as you can make the cookie reach the saga.

// The axios inside the saga:
const res = yield axios.get(url, {
    headers: {
        Cookie: "cookie1=value; cookie2=value; cookie3=value;"
    });

Another option, if you are using an access token is sending it like using an authorization header.

 const res = await axios.get(url, {
      headers: { Authorization: `Bearer ${token}` },
    });