SvelteKit Starter Kit + Web Preview Plugin CORS issue on Vercel

🆘 Support
1

Hi @roger !

I’m reopening this as I have issues using the web preview plugin with the sveltekit-starter-kit from DATOCMS.

My website is hosted on vercel. I setup things according to the documentation, I know the endpoint works by testing it locally.

But when I enter my development URL from vercel, I have a CORS issue :

Access to fetch at 'https://mydomain.vercel.app/api/preview-links?token=MyToken' from origin 'https://plugins-cdn.datocms.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I tried almost everything on vercel :

  • Disabling deployment protection
  • Adding the path /api OPTION ALLOWLIST in project’s settings
  • Adding a vercel.json config allowing the headers from /api routes.

Thanks!

(Mod note: Split from another topic and clarified which plugin was used)

2

Hey @sanrita,

Welcome to the forums!

Let me take a look at this for you and get back to you ASAP. Might have to make some changes to the starter kit and/or plugin to make it work right. Let me investigate a bit :slight_smile:

PS I split your topic from the old one just for better tracking.

3

Hi @sanrita,

It looks like the starter kit already comes with a CORS-ready endpoint (api/preview-links), but you need to specify the correct URL in the plugin settings, including the preview token.

For example, if your deployment is at myapp.vercel.app, the plugin’s “Previews webhook URL” field should look like:

https://myapp.vercel.app/api/preview-links?token=secretTokenProtectingWebhookEndpointsFromBeingCalledByAnyone

Screenshot 000865
Screenshot 0008651400×950 42.8 KB

Then the plugin should work:

Screenshot 000866
Screenshot 0008661920×943 149 KB

I also updated the starter kit readme with this info.

Please let me know if that works for you.