CORS and Live Preview

default discord avatar
samtietjen5 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
    eustachi05 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
    samtietjen5 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.