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

Support
, ,
#1

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

Access to XMLHttpRequest at ‘https://app.snipcart.com/api/cart/01033af3-37ae-4741-a217-8d8871fab876/pay’ from origin ‘https://www.myfrontend.co.uk’ 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: "//app.snipcart.com/api/(.*)",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          {
            key: "Access-Control-Allow-Origin",
            value: "https://www.swindon-meats.co.uk",
          },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
          },
          {
            key: "Access-Control-Allow-Headers",
            value:
              "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

#2

Hey @guhyi,
I’ve seen the same error when using the JSON crawler, the JSON products need to have the same weight and customFields as the ones on the website. The documentation was lacking in that regard, I’ve added more informations on required fields.