NextJS: CORS policy: No 'Access-Control-Allow-Origin' header

I trying out Snipcart with NextJS and in my checkout after paying I receive this error:

Access to XMLHttpRequest at ‘’ from origin ‘’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

In my next.cofig.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
        source: "//*)",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
            key: "Access-Control-Allow-Origin",
            value: "",
            key: "Access-Control-Allow-Methods",
            key: "Access-Control-Allow-Headers",
              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",

module.exports = nextConfig

However, the error persists.

I have configured the domain in snipcart settings and I’m using Stripe as the payment gateway, the issues seems to be with API calls

I’ve been playing around with the header configs for Access-Control-Allow-Origin. I’ve seen some posts that say Chrome doesn’t play nice with CORS so I tried a different browser with both local and deployed sites.

I have a hunch that its something to do with the SECRET_KEY from snipcart however I’m unsure how to implement this