Настройка: у меня есть проект Gatsby, который использует ApolloLink для создания соединения между конечной точкой GraphQL моей безголовой CMS (конечной точки Wordpress, сгенерированной с помощью плагина WPGraphQL ) и моим внешним интерфейсом. Метод извлечения использует «без корс». В настоящее время мой источник - localhost: 8000, в производстве должен быть домен, отличный от домена backend.
Проблема: мне нужно разместить внешний интерфейс в Netlify, поэтому front- и backend находятся в разных доменах. Когда я делаю запрос Apollo к CMS без заголовка, заголовки ответа возвращают ошибку 500.
в gatsby-browser
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: *