Encountering a CORS error in the Checkout UI when making a fetch call to the Shopify Remix App API.

[bkmahapatra27]

Encountering a CORS error while attempting to make fetch calls from the Checkout UI app to various API routes in my custom Shopify Remix app.

[BoostShop]

Are you trying to make an OTP?

You can't send data from front-end to back-end like this, you need to make a proxy server that will be the bridge.

[bkmahapatra27]

This pertains to OTP requests, but other calls for sending simple data are also unsuccessful when attempting to fetch from the Checkout UI using the fetch method.
https://shopify.dev/docs/api/shopify-app-remix/v1/guide-admin

I have tried the above but couldn't get any result

[hsdonkin]

I've run into this issue and can't seem to figure out how anyone else has solved it.

Things I've tried;
- `remix-utils/cors` package
- `{cors}` from the authenticate utils


I just get OPTIONS requests to my route, and then the requests fail because of CORS issues

[jains]

Same. I have followed the docs and still not working in production.

import { json } from "@remix-run/node";
import { authenticate, unauthenticated } from "../shopify.server";

export async function action({ request }) {
  const { cors, sessionToken } = await authenticate.public.checkout(request);
  const { admin } = await unauthenticated.admin(sessionToken.dest);

  const body = await request.json();

  // Does something

  return cors(json({ data }));
}

export const loader = async ({ request }) => {
  if (request.method === 'OPTIONS') {
    return new Response(null, {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Authorization, Content-Type',
      },
    });
  }
};

[hsdonkin]

I actually got this to work, with much chagrin and Remix name-cursing.

The trick was that both the loader and the action required the `cors` utility wrapping the response. If either of them didn't wrap their response, things would fail.

My hot take is that Remix is really, really, really, really unsuited for API development, which is really, really, really, not suitable for apps that require use of an API.

export async function loader({ request }: LoaderFunctionArgs) {
const { admin, cors } = await authenticate.admin(request);
return cors(json({}));
}

export async function action({ request }: LoaderFunctionArgs) {
const { admin, cors } = await authenticate.admin(request);
return cors(json({}));
}

[jains]

Wow. This worked. You saved me!
A bit weird nonetheless. 

[bootsgridDev]

Can you please put your code  which is working and how could you call that response ,either did you use proxy or did you directly call your server code. please explain.

I have tried a lot but still couldn't figure what went wrong.?

[vves]

You are a life saver