title: 401 error occurs between react, redux-toolkit, and node express
body: <p>I'm currently forming a Web page by using react, Redux-toolkit and node.js.<br/>
  as I refresh the page, I send axios to server and save response value in the redux store state.<br/>however, the error 401 (Unauthorized) occurs like the comment below and also I cannot access the response value.<br/>
  I ‘ve tried many methods but it all failed. I really need your help to solve this problem</p>
  <blockquote>
  <p>Failed to load resource: the server responded with a status of 401
  (Unauthorized) authSlice.js:77  Request failed with status code 401</p>
  </blockquote>
  <p>cors setup is like below.</p>
  <pre><code>const corsOptions = {
    origin: (origin, callback) =&gt; {
      //If (there's same origin || no origin)
      if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
        callback(null, true);
      } else {
        callback(new Error(&quot;Not allowed by CORS&quot;));
      }
    },
    credentials: true,
    optionsSuccessStatus: 200,
  };
  </code></pre>
  <p>handler(Problems occur regardless of whether jwt is stored in the cookie.)</p>
  <pre><code>const handlePageRefresh = async (req, res) =&gt; {
    console.log(req.cookies);
    const cookies = req.cookies;
    console.log(&quot;this is checking&quot;, cookies);
    if (!cookies?.jwt) return res.sendStatus(401);
    const refreshToken = cookies.jwt;
  
    //find the exact user with exact rT
    const foundUser = await User.findOne({ refreshToken }).exec();
  
    if (foundUser.refreshToken === refreshToken) {
      res.json({ login: success });
    }
    res.json({ login: fail });
  };
  </code></pre>
  <p>authSlice and loginCheck</p>
  <pre><code>export const loginCheck = createAsyncThunk(&quot;auth/loginCheck&quot;, async () =&gt; {
    try {
      const response = await axios.get(
        LOGIN_CHECK_URL,
        {},
        {
          withCredentials: true, // req에 쿠키를 보내는걸 allow해줌.
        }
      );
      console.log(&quot;loginCheck&quot;, response.data);
  
      return [...response.data];
    } catch (err) {
      return err.message;
    }
  });
  
  const authSlice = createSlice({
    name: &quot;auth&quot;, // A name, used in action types
    initialState, // The initial state for the reducer
    reducers: {},
    extraReducers(builder) {
      builder
        .addCase(login.fulfilled, (state, action) =&gt; {
          // console.log(&quot;STATE&quot;, state.status); //idle
          state.status = &quot;succeeded&quot;;
          const { accessToken } = action.payload;
          state.accesstoken = accessToken;
          state.logedIn = true;
          console.log(&quot;state.AT&quot;, state.accessToken); //accesstoken 값
        })
        .addCase(loginCheck.fulfilled, (state, action) =&gt; {
          console.log(&quot;pay&quot;, action.payload);
          state.loginCheck = action.payload.login;
        });
    },
  });
  </code></pre>
  <p>How i call loginCheck at index.js</p>
  <pre><code>const root = ReactDOM.createRoot(document.getElementById(&quot;root&quot;));
  store.dispatch(loginCheck());
  root.render(
    // &lt;React.StrictMode&gt;
    &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/*&quot; element={&lt;App /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;
    // &lt;/React.StrictMode&gt;
  );
  </code></pre>