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

Posted 2023-03-08

【中文标题】ApolloLink 到无头 CMS/跨域域（Wordpress WPGraphQL 端点）不工作：Apache 500 错误

【英文标题】：ApolloLink to Headless CMS / Cross Origin Domain (Wordpress WPGraphQL Endpoint) not Working: Apache 500 Error

【发布时间】：2020-05-13 02:49:16

【问题描述】：

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

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

在 gatsby 浏览器中

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: *

【参考方案1】：

要在 WPGraphQL 请求中配置 CORS 标头，请尝试在 WordPress 后端使用 WPGraphQL-CORS 插件。它就是为这种情况而设计的。