RTK 查询在 cookie 中设置令牌，但没有任何效果

Question

我几天前开始学习 RTK Query，我一直喜欢它很酷的功能和简单性，所以我决定在我使用 Next.js 构建的项目中从 useContext 切换到 RTK Query 以及使用 Node.js 和的自定义服务器表达。在这个项目中，我制作了一个用于登录和注册的 api 路由，在提供的自定义 axios 基本查询 RTK 查询的帮助下，可以使用 RTK 查询和 Axios 来实现该路由。登录和注册 api 端点已经有一个在 cookie 存储中存储令牌的逻辑。我将 RTK 查询与 axios 一起使用来发布用户请求，以便他们可以获得 cookie 存储中的令牌存储的响应。这种将用户令牌存储在 cookie 中的逻辑与 useContext 和 axios 配合得很好。 但是在使用 RTK 查询时，逻辑并没有按预期工作，这些是结果：

• 令牌已在 cookie 存储中设置，但我得到的响应状态为 401。
• 当用户在登录或注册页面提交凭据时，他们应该被重定向到个人资料页面，并显示其详细信息，因为我使用 useQuery 来获取用户个人资料。但数据没有显示。这意味着存储的令牌无效。
• 即使令牌已存储在 cookie 中，我也无法获取用户信息。
• 每当我点击链接将我重定向到特定路线时，useQuery 都不会获取任何内容，当我返回个人资料时，将获取并显示用户详细信息，但当我再次刷新页面时，不会显示任何数据
• 第一次get请求成功后，每次刷新页面总是丢失数据。
• 所有这些问题仅发生在后端受中间件保护的路由上，并且中间件用于验证令牌。但我可以重新加载数据在后端不受保护的页面。
• 我的后端还有一个中间件，用于验证和检查 cookie 中的 token 是否为 true，以检查用户是否经过身份验证，如果为 false，则应将用户定向到前端的登录页面。获取和检查数据是否为 true 的逻辑位于用受保护的路由包装的 HOC 组件内部，但每当数据值为 false 时，我仍然可以转到前端中的任何路由，而不是将我重定向到登录页面。当我将数据记录到控制台时，我收到了正确的数据。
• 从 cookie 中删除令牌成功。

    export const fetcherApi = createApi({
      reducerPath: "fetcherApi",
      baseQuery: axiosBaseQuery({
        baseUrl: "http://localhost:5000/",
      }),
      tagTypes: ["User"],
      endpoints(build) {
        return {
          //________Authentication
          registerUser: build.mutation({
            query: (form) => ({
              url: "register",
              method: "post",
              data: form,
            }),
            invalidatesTags: ["User"],
          }),

          loginUser: build.mutation({
            query: (form) => ({
              url: "login",
              method: "post",
              data: form,
            }),
            invalidatesTags: ["User"],
          }),

          getAuth: build.query({
            query: () => ({ url: "auth", method: "get" }),
          }),

          //__________User
          updateUserName: build.mutation({
            query: (...rest) => ({
              url: "update-user",
              method: "put",
              data: rest,
            }),
            invalidatesTags: ["User"],
          }),

          getUser: build.query({
            query: () => ({ url: "user", method: "get" }),
            providesTags: ["User"],
          }),

          //__________Profile
          postProfile: build.mutation({
            query: (form) => ({
              url: "login",
              method: "post",
              data: form,
            }),
          }),

          getAllProfiles: build.query({
            query: () => ({ url: "all-profiles", method: "get" }),
          }),

          getUserProfile: build.query({
            query: () => ({ url: "profile/me", method: "get" }),
          }),

          //___________Car
          postCar: build.mutation({
            query: (form) => ({
              url: "new-car",
              method: "post",
              data: form,
            }),
          }),

          putCar: build.mutation({
            query: ({ id, ...rest }) => ({
              url: `update-car/{id}`,
              method: "put",
              data: { rest },
            }),
          }),

          getAllCars: build.query({
            query: () => ({ url: "all-cars", method: "get" }),
          }),

          getCarById: build.query({
            query: (id) => ({ url: `onecar/${id}`, method: "get" }),
          }),

          getAllUserCars: build.query({
            query: () => ({ url: "my-car", method: "get" }),
          }),
        };
      },
    });

    export const {
      // ______Authentication______
      useGetAuthQuery,
      useRegisterUserMutation,
      useLoginUserMutation,
      //_______User_________
      useUpdateUserNameMutation,
      useGetUserQuery,
      //_____Profile_________
      useGetUserProfileQuery,
      useGetAllProfilesQuery,
      usePostProfileMutation,
      //_____Car____________
      usePostCarMutation,
      usePutCarMutation,
      useGetAllCarsQuery,
      useGetCarByIdQuery,
      useGetAllUserCarsQuery,
    } = fetcherApi;

Answer 1

我通过添加

credentials: include

作为 baseQuery 参数解决了这个问题，并在我的函数中添加了 async 和 wait

 baseQuery: fetchBaseQuery({
    baseUrl: "https://my-app.herokuapp.com/",
    credentials: "include",
  }),

Answer 2

我必须面对前端的错误（使用vite）我正在使用RTK-Query进行后端和前端之间的绑定，在后端我使用node js和express。

问题是我在所有验证检查（如密码、电子邮件、角色等）之后将令牌存储在登录控制器后端的 cookie 中，然后我使用 res.cookie 来存储令牌，

在前端，我使用 RTK- 查询来获取数据和发布数据（突变和查询）

我也在YouTube上搜索了很多所谓的教程

现在这是任何人都不会告诉的解决方案

在后端app.js/ts

const corsOptions = {
origin: 'http://localhost:5173/',
methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
allowedHeaders: ['Content-Type', 'Origin', 'X-Requested-With', 'Accept', 
'x-client-key', 'x-client-token', 'x-client-secret', 'Authorization'],
credentials: true}

app.use(cors(corsOptions))

前端 RTK 查询

  reducerPath: "userApi",
  baseQuery: fetchBaseQuery({ baseUrl: base ,credentials:"include"}),

稍后谢谢我