GraphQL cors issue with fetch client side

[andrzej (Andrzej Michalski)]

We're running into an issue with a cors error when trying to query the graphql endpoint from the client side using fetch. Our instance is peerage.prismic.io. Are there any current known issues?

We really need some urgent help with this one, so any help would be hugely appreciated. Many thanks!

[Fares]

Hi Andrzej,

Welcome to the Prismic community.

To be able to debug this issue, I would need some extra information. Would you please send me a code snippet that gives this QORS error so that I can reproduce it on my side?

So screenshots would help as well with the query you are trying to pass.

We currently don't have any general issue related to this; for more information about outages, please check out the status page.

Looking forward to your reply,
Fares

[andrzej (Andrzej Michalski)]

Thanks @Fares
My colleague who was stuck on this has just popped out for some lunch, but I'll try and provide some further detail in the meantime.

Our api call (GET) is:
https://peerage.cdn.prismic.io/graphql?query=query%20{%20%20allFamilys(sortBy:%20name_ASC)%20{%20%20%20%20edges%20{%20%20%20%20%20%20node%20{%20%20%20%20%20%20%20%20name%20%20%20%20%20%20%20%20creations%20%20%20%20%20%20}%20%20%20%20%20%20_meta%20{%20%20%20%20%20%20%20%20%20%20uid%20%20%20%20%20%20}%20%20%20%20}%20%20

Now if we run this on the server (or with Postman) it works fine, but in the browser (client side) we get the following CORS error:

Here are the headers:

Besides a bit of triage help, do we have access to any logs to be able to self-service triage issues like this?

Thanks again for your help,

Andrzej

[tech.laszlo (Laszlo)]

Hi, here is the code we are running to query the GraphQL API and getting the CORS error
from localhost when testing the call.

import Prismic from '@prismicio/client';

const prismicApiUrl = process.env.NEXT_PUBLIC_PRISMIC_API_URL;
const graphqlApiUrl = process.env.NEXT_PUBLIC_PRISMIC_GRAPHQL_API_URL;
const apiToken = process.env.NEXT_PUBLIC_PRISMIC_TOKEN;

export const PrismicClient = Prismic.client(prismicApiUrl, {
  accessToken: apiToken,
});

export const fetcher = async (query, { previewData, variables } = {}) => {
  const prismicAPI = await PrismicClient.getApi();

  const headers = {
    'Prismic-Ref': previewData?.ref || prismicAPI.masterRef.ref,
    'Content-Type': 'application/json',
    Authorization: `Token ${apiToken}`,
  };

  return fetch(
    `${graphqlApiUrl}?query=${query}&variables=${JSON.stringify(variables)}`,
    {
      headers,
    },
  );
};

[jeremy2 (Jeremy Johnson)]

@andrzej @tech.laszlo For what it's worth, we were seeing the same CORS error message, but in our case the actual problem was a parameter we were providing to the Apollo GraphQL client didn't match the parameters expected by the GraphQL query. So be aware that non-CORS issues can result in this error message.

[andrzej (Andrzej Michalski)]

Thanks for the input @jeremy2 - I'll check the params.
@Fares - any thoughts on what might the root cause might be?

[Fares]

Hi @andrzej

I've tried to reproduce this issue, but unfortunately, it wasn't successful; in fact, I've got a 400 with no CORS issue!

In fact, we have made some changes that might have fixed this issue and improves the error messages. Can you please check if you still have this issue?