CORS Error using Next.js

Orders can’t be completed because after clicking pay, I get the following error, and order is unsuccessful. Please help

Access to XMLHttpRequest at 'https://app.snipcart.com/api/cart/a827ede9-1ffb-4c7e-8ff2-0f7e92c52ba3/pay' from origin 'https://myname.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Full error with Snipcart error response

Access to XMLHttpRequest at 'https://app.snipcart.com/api/cart/a827ede9-1ffb-4c7e-8ff2-0f7e92c52ba3/pay' from origin 'https://myname.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
react_devtools_backend.js:4026 A 'system' error occured in Snipcart.Failed to get response from host {data: undefined, kind: 'system', code: 'snipcart_error_operation_failed', message: 'snipcart_error_operation_failed', technicalReason: 'Failed to get response from host'}
overrideMethod @ react_devtools_backend.js:4026

Got one solution.

My product pages were statically generated. I have a gut feeling Snipcart fails validating pages served as static.

I switched rendering page at runtime in next.js and problem is gone. But it’s not ideal because now product pages are build everytime user visits page instead of static.

1 Like

Is there another fix next to this?