App proxy CORS issue

Extensions
1

Hello, im in a weird situation, can someone please explain.

Im writing a customer-account extension and call an proxy to my nextjs route handle with POST method and keep getting CORS error until i give route this GET method
image
image

Am i misunderstanding or something.
Thanks for reading.

2

Hi @BrownTheFlower [quote=“BrownTheFlower, post:1, topic:18944”]
call an proxy to my nextjs route handle with POST method
[/quote]

Can you provide the code for the above call?

3

Of course, this i my codes:

import {
  getCustomerMetafield,
  getProductMetafield,
  getShopifyClientByShop,
  upsertMetafields,
} from "@/lib/shopify";
import { NextRequest, NextResponse } from "next/server";

export async function GET() {}

export async function POST(req: NextRequest) {
  const { value, customerId, productId, shop } = (await req.json()) as {
    customerId: number;
    productId: string;
    value: boolean;
    shop: string;
  };

  const shopifyClient = await getShopifyClientByShop(shop);
  if (!shopifyClient) return NextResponse.json({ message: "Unauthorized" }, { status: 401 });

  try {
    const [products, customers] = await Promise.all([
      getCustomerMetafield(
        shopifyClient.client,
        `gid://shopify/Customer/${customerId}`,
        "wishlist",
        "customer"
      ),
      getProductMetafield(
        shopifyClient.client,
        `gid://shopify/Product/${productId}`,
        "wishlisted_customers",
        "product"
      ),
    ]);

    let wishlistedProducts: string[] = [];
    let wishlistedCustomers: string[] = [];
    if (products.metafield?.value) {
      wishlistedProducts = JSON.parse(products.metafield.value);
    }
    if (customers.metafield?.value) {
      wishlistedCustomers = JSON.parse(customers.metafield.value);
    }

    if (value) {
      wishlistedProducts.push(productId);
      wishlistedCustomers.push(String(customerId));
    } else {
      wishlistedProducts = wishlistedProducts.filter((id) => id !== productId);
      wishlistedCustomers = wishlistedCustomers.filter((id) => id !== String(customerId));
    }

    await upsertMetafields(shopifyClient.client, [
      {
        namespace: "customer",
        key: "wishlist",
        type: "list.single_line_text_field",
        value: JSON.stringify(wishlistedProducts),
        ownerId: `gid://shopify/Customer/${customerId}`,
      },
      {
        namespace: "product",
        key: "wishlisted_customers",
        type: "list.single_line_text_field",
        value: JSON.stringify(wishlistedCustomers),
        ownerId: `gid://shopify/Product/${productId}`,
      },
    ]);

    return NextResponse.json({ message: "success" });
  } catch (err) {
    return NextResponse.json({ message: "Failed to update your wishlist" }, { status: 500 });
  }
}

export const getCustomerMetafield = async (
  client: Shopify,
  ownerId: string,
  key: string,
  namespace: string = PROFILE_NAMESPACE
) => {
  try {
    const query = `query {
      customer(id: "${ownerId}") {
        metafield(namespace: "${namespace}", key: "${key}") {
          id
          value
        }
      }
    }`;

    const data: {
      customer: {
        metafield: {
          value: string;
        } | null;
      };
    } = await client.graphql(query);

    return data.customer;
  } catch (err: any) {
    throw new Error(err);
  }
};
4

Hi again,

App proxies support both GET and POST methods, but you must handle CORS preflight (OPTIONS) requests and set the correct CORS headers in your response - so you should add an OPTIONS handler to respond to CORS preflight requests.

Also make sure your app proxy is configured correctly in the Partner Dashboard and don’t rely on cookies for authentication with app proxies; use HMAC or query parameters.