"Request header field mode is not allowed by Access-Control-Allow-Headers in preflight response"如何解决Apollo的问题？

Question

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

这是我的 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),
    ssrMode: isServer,
    ssrForceFetchDelay: isServer ? 100 : undefined,
  });

  return client;
};

export default createApolloClient;

Answer 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,
        },
    };
});

"Request header field mode is not allowed by Access-Control-Allow-Headers in preflight response"如何解决Apollo的问题？

"Request header field mode is not allowed by Access-Control-Allow-Headers in preflight response" how to solve problem with Apollo?

reactjs

graphql

apollo

react-apollo