V5 Gatsby 4 Previews access to fetch blocked by CORS

Good day Prismic/Gatsby people.
I'm hosting on Gatsby Cloud and made the migration to v5 Prismic Tools.
It was a mostly painless migration. The raw/richText was the hardest part.

I've followed the documentation found here:
https://prismic.io/docs/technologies/gatsby-prismic-v4-to-v5
and here
https://prismic.io/docs/technologies/previews-gatsby

See the error below:

Access to fetch at 'https://{reponameRemoved}.cdn.prismic.io/api/v2' from origin 'https://preview-{gatsbyCloudNameRemoved}.gtsb.io' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Am I missing something? Is there a known issue? It's probably just me, right?

Hello @edtech, welcome to the community!

Just today, we've updated those documents to support the latest versions of the plugins, glad to see you already found them!

The error doesn't seem like something coming from Prismic. CORS issues happen for various reasons. Usually, they appear when an app checks if the server you're using can be accessed from the browser. I've seen cases where the warning disappears when people update their URLs to use https instead of HTTP.

In which step of the migration are you? Have you been able to run your project in development?

1 Like

We're also experiencing this issue after upgrading to Gatsby 4 and the v5 prismic tools. We're using https and URL's haven't changed. We're hosting on Gatsby Cloud also - though the preview plugin didn't have a CORs issue prior to the upgrade.

Edit: @edtech It looks like a bugfix was released 3 hours ago! prismic-gatsby/CHANGELOG.md at main · prismicio/prismic-gatsby · GitHub

1 Like

Thank you to @Pau & @paul3 for the quick and successful resolution of this issue. I have applied the 5.0.2 updates and can report that the CORS issue has been resolved.

Now this may be an entirely separate issue, but since I've found a couple of helpful people, I'm going to press my luck and ask. The unpublished previews, if I follow the docs for the v5 tools and stop where it says to stop if you use Gatsby Cloud, will they work? Or do I need to go through all of the other steps if I want unpublished previews?

1 Like

I'm yet to have been able to get unpublished previews to work - I've only been able to get them running when the content is published. I think historically you used to be able to publish, then unpublish and it would work (I could be wrong here) - but we're currently unable to do that either.

1 Like

Well lets make a pact, if one of us figures it out, we'll let the other one know.

1 Like

Sounds like a plan! Godspeed!

Hey there @edtech and @paul3. We've tested a deployment and preview setup with Gatsby Cloud and noticed two things that are necessary (they're now part of the Prismic + Gatsby Cloud doc).

  1. You need to include the releaseID in the source plugin configuration.
  2. The Link Resolver of the preview config in the repository must have a trailing slash (for example, /preview/, not /preview) to ensure they send the URL parameters to the preview page.

Let us know if you can configure the previews successfully!

Hi @Pau

How would this work if we're not actively using releases?

My (limited) understanding of releases is that they'd change frequently as the content team do their work. As a result, the release ID would have to be continuously updated and the content team don't actively have access to reconfigure the environment variables each time within Gatsby cloud (for security reasons).

Is there a value that we can provide that targets the 'master/mainline' release or is there a workaround / particular workflow for this?

What changes is the release ref. The release ID is a unique identification per release. You can see the difference in your repository’s API browser. Look at this example:

Here the release ref is YYLG4BEAABIAgSLc~YYKWlxEAAC8AgEHT, whereas the release ID is YYLGwBEAACoAgSI4

Thanks for the reply @Pau

How would I go about getting the release ID?
If I open up the repository API browser, I only have the master ref there whether I'm signed in or not.

Hey there Paul!

You can get it there in the API browser, but you need to unlock all the refs. You will see this pop-up asking for access in your repository:

Once you accept it, you will be able to see all the refs of your releases.

Hello team. Did you manage to make the preview work?
Let us know if you need additional help about this matter.

Thank you for continuing to support our request for support with these previews. I have followed the steps to the best of my ability. I have a Gatsby Cloud Previews release to which I publish content I want to preview prior to publishing. This seems to work!

Thank you. I will continue to report here for updates and to provide updates as I experience changes. @paul3, let me know if you need any help.

1 Like

Thank you very much for the outlook, @edtech!
Threads in the forum close after seven days of inactivity. If this happens before you post any updates, please feel free to reopen it by clicking the flag button. Then you can add a new comment.

Hi Pau,

Apologies for the delay in getting back to you - we were able to get this to work by creating a release.
The gatsby-cloud specific doc was particularly helpful - thank you.

@edtech Appreciate the offer! All the best!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.