React with Typescript 无法从 Spring 应用程序接收 XSRF-TOKEN

Question

我编写了一个 Spring Boot 应用程序，我想在其中使用 CSRF。

为此，我使用以下片段设置了 Spring SecurityFilterChange：

.csrf(csrf ->
                        csrf.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
                                .csrfTokenRequestHandler(new CsrfTokenRequestAttributeHandler())
                                .ignoringRequestMatchers(unprotectedMatcher))
                .addFilterAfter(new CookieCsrfFilter(), BasicAuthenticationFilter.class)

我还添加了 Spring 6 的 CookieCsrfFilter，如下所述：https://developer.okta.com/blog/2022/06/17/simple-crud-react-and-spring-boot

在 chrome 中我看到了 cookie，并且 cookie 没有标记为 httpOnly，因此 JS/Typescript 应该加载 cookie

在我的React应用程序中，用打字稿编写，我在index.tsx中将CookiesProvider设置为手册中的描述https://www.npmjs.com/package/react-cookie

...
import { CookiesProvider } from 'react-cookie';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <CookiesProvider>
      <App />
    </CookiesProvider>
  </React.StrictMode>
);

在我的 App.tsx 中，我想读取 XSRF-TOKEN，但该令牌每次都是未定义的。

const [cookies] = useCookies(['XSRF-TOKEN']);

useEffect(() => {
    const interval = setInterval(() => {
      if (loggedIn) {
        console.log("XSRF-TOKEN: " +  cookies['XSRF-TOKEN']);
        fetch(REACT_APP_BACKEND_URL + "/user/check", {
          headers: {
            'X-XSRF-TOKEN': cookies['XSRF-TOKEN'],
          },
          method: 'POST',
          credentials: 'include',
          }).then(response => {
            if (!response.ok) {
             // logoutUser();
            }
          }); 
      }
    }, 10000);

知道我可以检查什么或者问题可能是什么吗？是不是react-cookie和typescript有问题？

我尝试在代码中的多个位置访问 cookie。 调试也没有告诉我原因。我唯一没有看到的是，useCookies.js 中的 onChange() 函数从未被调用。

Answer 1

我发现问题了。

问题出在 Spring 中的 SecurityFilterChain 上。

我首先添加了 .cors(Customizer.withDefaults()) 但随后 cookie 不可读。 将 .cors(Customizer.withDefaults()) 放到链的末尾后，令牌就可以被 React 读取。