authenticate.public.checkout CORS failed to respond

[liam997]

Issue summary

Checkout UI extension validate failed.

• "@shopify/shopify-app-remix": "^2.0.0",
• Node version: 18.18
• Operating system: Ubuntu 22.04.3 LTS

// Paste any relevant logs here

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

export const loader = async ({ request }) => {
  const { sessionToken, cors } = await authenticate.public.checkout(
    request
  );
    return cors(json({
        point: 500,
        covert_rate: 10,
    }));
};

Error log

13:50:36 │ remix      │ OPTIONS /checkout-api/get-point 204 - - 12.669 ms
13:50:36 │ remix      │ [shopify-app/INFO] Authenticating checkout request
13:50:36 │ remix      │ GET /checkout-api/get-point 401 - - 3.017 ms

Expected behavior

It should return 200 and JSON like in object

Actual behavior

I get a 204 OPTIONS and 401 GET response

Steps to reproduce the problem

1. Install remix app
2. Create an extension allow network access.
3. Create an API with code for validate in the docs
4. Add fetch route to API in checkout UI extension
5. Open developer preview for test

[liam997]

After a while of checking.

It worth metion there need to use sessionToken from useAPI() to verify

[mrkaluzny]

@liam997 I get this same error with provided sessionToken. The server gets Options request and returns 401 response, CORS seems not to do anything that is authethicated through public.

I also tried remix/utils

// routes/api.js
export const loader = async ({ request }) => {
  const { cors, sessionToken } = await authenticate.public.checkout(request);
  return cors(json([]));
};

Request

const token = await sessionToken.get();
const res = await fetch(`${APP_URL}/api/endpoint`, {
           method: "GET",
           headers: {
             Authorization: `Bearer ${token}`,
             "Content-Type": "application/json",
           },
       },
);

const data = await res.json();

[mrkaluzny]

@liam997 Huh it actually works without changes when deployed :)