Real-time live preview not updating in dev environment, CORS error resolved.
8 replies
Last updated: Sep 22, 2022
H
Hey chat. Just a quick question is real time live preview support to work in dev environments/on localhost? I've been following along with https://www.sanity.io/guides/nextjs-live-preview and finding it doesn't realtime update. Haven't set up deployment yet so haven't tested.
Sep 13, 2022, 2:36 AM
K
It should, yes. Do you have any error or something?
Sep 13, 2022, 6:53 AM
H
user F
Thanks for the reply User. I'm not getting an error, simply that it isn't updating as expected. If I make an edit to content, I need to reload the preview in order to see the update. My assumption was that 'live' meant it was realtime. Example video attached.Sep 16, 2022, 5:14 AM
K
Oh I actually don’t know if that‘s supposed to work within the studio. What if you open the preview in a different tab instead? Same result?
Sep 16, 2022, 6:48 AM
It should update the preview without refreshing that tab. What does your preview code look like? And just to double check, there are no errors or warnings in the console when this happens?
Sep 19, 2022, 9:19 PM
H
user M
Preview code is based on the tutorial referenced (https://www.sanity.io/guides/nextjs-live-preview ). My repo can be found here .Thanks for pointing to the error console, I don't know why I didn't think to check. I am getting a CORS error when the preview loads. I haven't had time to think or get into it but I am slightly confused that there is a CORS error given the preview loads.
[Error] Origin <http://localhost:3000> is not allowed by Access-Control-Allow-Origin. Status code: 403 [Error] Fetch API cannot load <https://9zti0fg7.api.sanity.io/v1/users/me> due to access control checks. [Error] Failed to load resource: Origin <http://localhost:3000> is not allowed by Access-Control-Allow-Origin. Status code: 403 (me, line 0)
Sep 21, 2022, 2:18 AM
You're right! It is strange that it initially loads but then throws the CORS error. Have you added
<http://localhost:3000/>to your CORS origins in manage?
Sep 21, 2022, 3:15 PM
H
Thanks
user M
, you're a star. It was a CORS issue which I must have over looked in the guide, it's clearly there. Thanks again.Sep 22, 2022, 8:37 AM
There's so much going on in that guide it's really easy to miss something! Glad it's working now!
Sep 22, 2022, 3:09 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.