Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

CORS and Live Preview

default discord avatar
samtietjen11 months ago
2

When checking the console on the frontend I noticed this error:


Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3001') does not match the recipient window's origin ('http://localhost:3000').

(payload = 3001, next = 3000)



Which seems like some sort of CORS issue with live preview? Any insights?



Also, [referencing this example](

https://github.com/payloadcms/payload/blob/main/examples/live-preview/next-app/app/%5Bslug%5D/page.client.tsx

) it seems like data is coming from useLivePreview at all times. Is this okay? Should there be a draft mode or some sort of conditional so that it isn't trying to subscribe outside of the admin?

  • default discord avatar
    eustachi011 months ago

    Hi, yes, data should come from the live preview on your front end. You don't need a draft mode. You should also add your frontend address to the cors in your payload config. Something like

    cors: [http://localhost:3000]

    . I hope this helps

  • default discord avatar
    samtietjen11 months ago

    Figured, but just wanted to make sure. Thanks @Eustachio !

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.