CORS issue with Checkout UI Extension at Payment

Retired Boards Appdev Extensions
1

Created a very basic checkout extension inside of an app using node. Selected Remix, JS + React.

Tested it in dev environment and everything works great. I went to deploy it and can see the target under pickup (collects data from customer and passes to order metafields) which passes info as it should but when I checkout (pay) my target on the thank you page (Banner that takes the entered metafield data and shows the customer what they selected) gets thwarted with the CORS message below and doesn’t show up at all. I am not making any calls to an outside API.

Access to fetch at ‘https://eating-hotdogs-stupid-lackluster.trycloudflare.com/extensions’ from origin ‘https://some-shop.myshopify.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Works great before payment is made and everything works great on dev. It is a dev store with Checkout and Customer Accounts Extensibility. I did create a custom distribution link for the install. Wondering if the App Bridge config may be off as the embed of my app looks off but no idea how or what I would do to fix this. Any help would be appreciated. Talk down to me. This is my first app.

2

@TheThisThat

I had the same issue recently when I migrated my app to the Remix template. The solution in this post helped point me in the right direction.

First, I installed the remix-utils package.

Then in the API route, I use the CORS function to return the loader function response:

import { json } from "@remix-run/node";
import { cors } from 'remix-utils/cors';

export const loader = async ({ request }) => {
  const response = json({ body: 'data' });
  return await cors(request, response);
};​

In the action function I also return the data using the CORS function, for example:

export const action = async ({ request }) => {
  const body = await request.json();
  const query = {
      'simple-example': true
    };

    const queryString = new URLSearchParams(query).toString();
    const response = await fetch("https://simple-example.com?" + queryString, { 
      method: "GET", 
      headers: {
        'Content-Type': 'application/json'
      }
    });

    const data = await response.json();
    return await cors(request, json(data));
};​

And finally, the only way I could get around the “…OPTIONS request method not allowed” errors after integrating the CORS function in the API route was to return CORS headers at the very beginning of the handleRequest function in entry.server.jsx, for example:

// Return CORS headers on OPTIONS request
  try {
    if (request.method === `OPTIONS`) {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type, Accept, Authorization, X-Requested-With, Application, ip'
        },
      });
    }
  } catch (e) {
    console.error(e);
  }​

I hope this helps you or someone else!

3

Hi,

Is your problem solved? I have the same problem, we have a cors issue when requesting api.sign-changeset.jsx.

Can you share some solutions to solve this problem?

Best regards!