CORS Error using GraphQL endpoint

Developing with Prismic
1

Hi there,

I'm using fetch to get my content as follow :

async function fetchData() {
            const endpoint = process.env.NEXT_PUBLIC_PRISMIC_ENDPOINT;
            const token = process.env.NEXT_PUBLIC_PRISMIC_ACCESS_TOKEN;
            const query = `
            query ExperimentDocumentQuery {
                allExperiments{
                 edges {
                   node {
                     seo_title
                     seo_description
                     hero_headline
                     usage_headline
                     usage_p_1
                     usage_p_2
                     usage_p_3
                     usage_p_4
                     twist_title
                     twist_image_hero
                     twist_p_1
                     twist_p_2
                     twist_p_3
                     twist_image_row_1
                     twist_image_row_2
                     twist_image_row_3
                     twist_image_row_4
                     twist_image_bottom
                     footer_big_idea
                   }
                 }
               }
             }
          `;

            const response = await fetch(endpoint, {
                method: 'POST',

                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${token}`,
                },
                body: JSON.stringify({ query }),
            });

            const data = await response.json();
        }

And then I get this CORS error:

Access to fetch at 'https://myrepo.cdn.prismic.io/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Any idea?

Thanks for your help!

2

Have you tested the same query in the GraphiQL playground of your repository? Is it resolving successfully?

4

Yes the query works on GraphiQl playground

5

I see. In general, CORS (Cross-Origin Resource Sharing) errors occur in GraphQL when the client tries to fetch data from a different domain or port than the server that serves the GraphQL API.

Web browsers enforce a security feature that restricts web pages from making requests to different domains or ports than the one that served the page. Therefore, if the GraphQL API and the client making the request are not on the same domain and port, the browser may block the request, resulting in a CORS error.

It's not always easy to pinpoint where exactly the issue comes from without looking at the project setup itself. Here are some common solutions:

  • Enable CORS on the server: You can allow cross-origin requests on the server-side by configuring the server to include CORS headers in the HTTP response. This will tell the browser that the server allows cross-origin requests from a specific domain or all domains.
  • Use the CDN of your endpoint to serve the GraphQL API. CDNs are designed to serve content from multiple locations, so they can handle cross-origin requests more efficiently.
  • Use a proxy server: You can also solve CORS errors by setting up a proxy server that acts as an intermediary between the client and the GraphQL API. The client sends the request to the proxy server, which forwards the request to the GraphQL API on behalf of the client. Since the request is sent from the same domain as the server, the browser will not block the request.
  • Use a GraphQL client library: Many GraphQL client libraries, such as Apollo Client and Relay, handle CORS errors automatically. These libraries can be configured to use a proxy or include the necessary CORS headers in the HTTP requests.

It's important to note that solving CORS errors in GraphQL can be a complex issue that depends on the specific configuration of your server and client.