无法从 Java 后端设置 HTTP-Only cookie 到 NextJS 应用程序答案

【问题标题】：Can't set HTTP-Only cookie from Java backend to NextJS app无法从 Java 后端设置 HTTP-Only cookie 到 NextJS 应用程序
【发布时间】：2022-02-08 10:18:33
【问题描述】：

我很难使用 cookie。当我的 NextJS 应用程序向我的后端发出 /login 请求时，我在响应中发送和 Http-Only cookie，我认为它将保存在 Cookie 存储中，并且可以在 req.headers.cookie 上使用我的 NextJS 应用程序上的 ServerSideProps，但我的 cookie 从未设置，即使它们出现在我后端的 /login 响应中。

我向我的网关微服务发出请求，然后将其重定向到我的安全微服务，在该安全微服务中，我像这样编写 cookie 并在其中保存 JWT：

        Cookie cookie = new Cookie("Authentication", token);
        cookie.setMaxAge(28800);
        cookie.setSecure(false); //TODO: Change this to false or true depending on dev or prod
        cookie.setPath("/");
        cookie.setHttpOnly(true);

        response.addCookie(cookie);
        response.addHeader(AUTH_HEADER_KEY, TOKEN_PREFIX + token);

那么当我的前端执行 /login POST 请求时，我的后端的响应是这样的：

但永远不会保存在我的浏览器中的存储中，如下所示：

在我的 ServerSideProps Next 函数上请求它们时也没有：

export const getServerSideProps: GetServerSideProps = async ({
  locale,
  req,
}) => {
  const cookies = req.headers.cookie;
  console.log('Cookies: ', cookies);
  return {
    props: {
      ...(await serverSideTranslations(locale ? locale : 'es', ['dashboard'])),
    },
  };
};

我对 /login 的请求在前端如下所示：

const loginUserMutation = useMutation(
    ({ email, password }: UserLogin) => {
      return axios.post(process.env.NEXT_PUBLIC_DEV_DOMAIN_URL + '/login', {
        email,
        password,
      });
    },
    {
      onSuccess: (data) => {
        const loggedUser: LoggedUser = {
          role: data.data.role,
          email: data.data.email,
          token: data.headers.authorization,
        };
        saveUserInContext(loggedUser);
        router.push('/');
      },
    }
  );

我还能做什么？我的 NextJS 应用程序位于 localhost:3000，我的网关位于 localhost:4010，我的安全微服务位于 localhost:4020

编辑：

发现如果在我的 CORS 配置中添加此行，它将起作用，并且还可以在我的前端使用 allowCredentials。但是请注意，我的 Spring Cloud Gateway 微服务正在破坏我的标头，所以我仍然需要调查它，但如果您遇到同样的问题，请尝试直接使用您的端点。

 @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        final var source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        source.registerCorsConfiguration("/**", corsConfiguration.applyPermitDefaultValues());
        corsConfiguration.setExposedHeaders(List.of("Authorization", "Set-Cookie"));
        corsConfiguration.setAllowedOrigins(List.of("http://localhost:3000"));
        corsConfiguration.setAllowCredentials(true);

        return source;
    }

【问题讨论】：

标签： java spring cookies spring-security next.js

【解决方案1】：

尝试将Set-Cookie 添加到Access-Control-Expose-Headers 标头。

【讨论】：

它部分工作，我必须添加一些 allowedOrigins 和 allowCredentials 才能工作，但不知何故我的 Spring Gateway 正在破坏我的标题。谢谢！
因为这是一个跨域请求，在这个调用之前应该有一个（由浏览器）发送的 OPTIONS 调用。如果您查看其响应，就很容易解决此类问题。
确切地说，它在 OPTIONS 上开始失败，我认为这是因为我在网关中为原始标头执行了 DedupeResponseHeaders，并且不知何故我可能丢弃了来自 Spring Security 微服务的那些，而不是从网关丢弃受骗者。