“预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段模式”如何解决 Apollo 的问题？

Posted 2023-02-27

【中文标题】“预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段模式”如何解决 Apollo 的问题？

【英文标题】："Request header field mode is not allowed by Access-Control-Allow-Headers in preflight response" how to solve problem with Apollo?

【发布时间】：2021-04-07 07:58:55

【问题描述】：

当我使用 gql 发出简单的 fetch 请求时，它工作正常，但是当我尝试使用 apollo 客户端创建它时，它显示此错误 Access to fetch at 'bla-bla' from origin 'http:// localhost:3000' 已被 CORS 策略阻止：在预检响应中 Access-Control-Allow-Headers 不允许请求标头字段模式。

这是我的 Apollo 客户：

import 
  ApolloCache,
  ApolloClient,
  HttpLink,
  InMemoryCache,
  concat,
  NormalizedCacheObject,
 from "@apollo/client";
import  setContext  from "@apollo/client/link/context";

const createApolloClient = (isServer: boolean) => 
  const httpLink = new HttpLink( uri: process.env.REACT_APP_GRAPHQL );
  const accessToken = localStorage.getItem(
    "CognitoIdentityServiceProvider.653kt2v1novmi53toi3uc82m4f.Google_112862354108088073641.accessToken"
  );

  const authLink = setContext(async (_,  headers ) => 
    return 
      headers: 
        ...headers,
        mode: "no-cors",
        "Access-Control-Allow-Origin": "*",
        'Authorization': accessToken,
      ,
    ;
  );

  const cache = new InMemoryCache().restore(
    !isServer ? (window as any).__APOLLO_STATE__ : 
  ) as ApolloCache<NormalizedCacheObject>;

  const client = new ApolloClient<NormalizedCacheObject>(
    cache,
    defaultOptions: 
      watchQuery: 
        fetchPolicy: "cache-first",
      ,
    ,
    link: concat(authLink, httpLink),
    s-s-rMode: isServer,
    s-s-rForceFetchDelay: isServer ? 100 : undefined,
  );

  return client;
;

export default createApolloClient;

【参考方案1】：

更改下方并尝试...

之前

  const authLink = setContext(async (_,  headers ) => 
    return 
      headers: 
        ...headers,
        mode: "no-cors",
        "Access-Control-Allow-Origin": "*",
        'Authorization': accessToken,
      ,
    ;
  );

之后

const authLink = setContext(async (_,  headers ) => 
    return 
        headers: 
            ...headers,
            mode: "no-cors",
            "Access-Control-Allow-Origin": "*",
            'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
            "Access-Control-Allow-Credentials": true,
            'Authorization': accessToken,
        ,
    ;
);