问题描述
当我使用 gql
进行简单的获取请求时,它工作正常,但是当我尝试使用 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),ssrMode: isServer,ssrForceFetchDelay: isServer ? 100 : undefined,});
return client;
};
export default createApolloClient;
解决方法
在下面更改并尝试...
之前
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,'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',"Access-Control-Allow-Credentials": true,};
});