无头CMS的ApolloLink /跨域域（Wordpress WPGraphQL端点）不起作用：Apache 500错误

Question

设置：我有一个Gatsby项目，该项目使用ApolloLink在我的无头CMS的GraphQL端点（通过WPGraphQL plugin生成的Wordpress端点）和我的前端之间建立连接。提取方法使用“ no-cors”。我的来源当前是localhost：8000，生产环境中的域必须与后端域不同。

问题：我必须在Netlify上托管前端，因此前端和后端位于不同的域上。当我向无头CMS发出Apollo请求时，响应头将返回错误500。

在盖茨比浏览器中

const link = createHttpLink({
  uri: 'https://my-other-endpoint.com/graphql', 
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json',
    'Origin': 'http://localhost:8000'
  },
  fetchOptions: {
    mode: 'no-cors'
  }
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link
});

graphql查询：

const TEST_QUERY = gql`
  query {competenceBy(competenceId:1067){date}}
`;

应该呈现数据的组件：

const MyComp = (props) => {
  const { loading, data, error } = useQuery(TEST_QUERY, { errorPolicy: 'all' });

  if (loading) return <p>Loading Posts...</p>;

  if (error) {
    return (
      <p>
        graphQLErrors:
        <br />
        {error.graphQLErrors.map(({ message }) => (
          <span>{message}</span>
        ))}
        <br />
        <br />
        {error.message}
      </p>
    )
  }

  const { page } = data;
  console.log("TCL: CompetencesPageTemplate -> page", page)

  return (
    <>
        {
          page.acf.content_competences
        }
    </>
  );

}

export default MyComp

在我服务器上的.htaccess中：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *

[设置：我有一个Gatsby项目，该项目使用ApolloLink在我的无头CMS的GraphQL端点（通过WPGraphQL插件生成的Wordpress端点）和我的...之间建立连接。

Answer 1