Apollo 客户端“此操作已被阻止为潜在的跨站请求伪造 (CSRF)”

Question

我正在使用 nextJS 和 apollo 客户端，并且正在创建一个需要发送图像和文件的突变。

但是当我尝试提出请求时，错误出现了。This operation has been blocked as a potential Cross-Site Request Forgery (CSRF)。我在 @apollo/server v3 中创建了相同的突变，但没有这样的错误。这可能是 v4 的一些问题。

我的阿波罗客户端设置：

客户端设置

错误 ：

错误

Apollo v4 服务器设置：

服务器设置

根据阿波罗文档

默认情况下，Apollo Server 4 启用了 CSRF 防护功能。这意味着您的服务器仅在满足以下条件之一时才执行 GraphQL 操作：

阿波罗文档

Answer 1

在 Apollo 客户端配置中添加：

{headers: {'Apollo-Require-Preflight': 'true'}} 到 createUploadLink

好像：

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { createUploadLink } from "apollo-upload-client";
import { setContext } from "apollo-link-context";

// const httpLink = createHttpLink({
//     uri: 'http://localhost:4000/graphql',
// })
const middlewareUpdate = createUploadLink({ uri: process.env.SERVER });
const authLink = setContext((_, { headers }) => {
  // Leer el storage almacenado
  const token = localStorage.getItem("token");
  // console.log(token);
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
      'Apollo-Require-Preflight': 'true'
    },
  };
});

const Client = new ApolloClient({
  connectToDevTools: true,
  link: authLink.concat(middlewareUpdate),
  
  fetchOptions: {
    mode: "no-cors",
  },
});

export default Client;