CloudFront Error - "The request could not be satisfied" when migrating to @prismicio/client

Developing with Prismic
1

Good afternoon,

We have some instances of prismic-javascript still being used in our repo which I'm in the process of upgrading to @prismicio/client. In the original code we have a number of GraphQL queries being called using fetch. It seems now that I've transitioned over to the new package I'm seeing the following error:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>

<HEAD>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
	<TITLE>ERROR: The request could not be satisfied</TITLE>
</HEAD>

<BODY>
	<H1>403 ERROR</H1>
	<H2>The request could not be satisfied.</H2>
	<HR noshade size="1px">
	This distribution is not configured to allow the HTTP request method that was used for this request. The
	distribution supports only cachable requests.
	We can't connect to the server for this app or website at this time. There might be too much traffic or a
	configuration error. Try again later, or contact the app or website owner.
	<BR clear="all">
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
	<BR clear="all">
	<HR noshade size="1px">
	<PRE>
Generated by cloudfront (CloudFront)
Request ID: [ID here]
</PRE>
	<ADDRESS>
	</ADDRESS>
</BODY>

</HTML>

This is a snippet of the code in question:

    const graphqlEndpoint = prismic.getGraphQLEndpoint(REPOSITORY);
    const masterRef = await client.getMasterRef();

    const response = await fetch(graphqlEndpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Prismic-Ref': previewData?.ref || masterRef.ref,
        'Accept-Language': API_LOCALE,
        Authorization: `Token ${API_TOKEN}`,
      },
      body: JSON.stringify({ query, variables }),
    });

Besides the addition of the provided Prismic methods to get the endpoint and ref, this is an almost direct copy of the original code using prismic-javascript.

Would you please be able to advise whether this is an internal error or something fundamentally wrong in my code?

2

Hi @martin.wheeler ,

Welcome to the community!

A 403 Forbidden response status code indicates that the server understands the request but refuses to authorize it.

The likely causes are:

  • Missing access token for query endpoint
  • Incorrect access token for query endpoint

The like fixes are to:

  • Confirm the access token in your repo settings
  • Check you’re accessing your .env file correctly
3

Good evening @Phil ,

Thanks for coming back to me. I'll confirm with the team tomorrow that the credentials are definitely correct for my local setup, but I know they're correct in our Vercel environment as they've not changed recently and the only thing that is different is this code/package change.

I'm curious on your thoughts about the error text:

This distribution is not configured to allow the HTTP request method that was used for this request. The distribution supports only cachable requests. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.

I'm actually getting this back through Postman, but HTTPS is configured on our Vercel environment and the same occurs there during builds. I'm able to access the REST API endpoint https://[repo-name].prismic.io/api/v2 with no trouble - I just seem to be having trouble with GraphQL requests.

Thanks,

Martin

4

Hi Martin,

My apologies; I only realised you're using the GraphQL API. I believe the issue you're seeing is from the fact that our GraphQL API only accepts GET requests and not POST requests.

You'll need to use GET requests to get this to work.