这个错误通常是由于CSRF保护触发导致的。解决办法是在后端设置正确的CORS配置以允许来自前端的请求,并确保正确地设置HTTP请求头部,如CSRF令牌。
以下是一个示例
// 在后端 API 中设置接受来自前端的请求的 CORS 配置。
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'http://localhost:3000',
credentials: true
}));
// 在前端 ApolloClient 中设置 CSRF 防护配置。
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
link: new HttpLink({
uri: 'http://localhost:4000/graphql',
credentials: 'include'
}),
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: {
errorPolicy: 'all',
fetchPolicy: 'no-cache',
},
query: {
errorPolicy: 'all',
fetchPolicy: 'no-cache',
},
mutate: {
errorPolicy: 'all',
},
},
});
此处解决方法假设前端服务器运行在http://localhost:3000
上,后端服务器运行在http://localhost:4000/graphql
上。如果您的设置与此不同,请相应地更改配置。
上一篇:ApolloClient中,如果“onError”重试尝试失败,是否可以触发副作用?
下一篇:ApolloClient:ApolloClient中相当于ReduxToolkit“transformResponse()”函数的是什么?如何解决?