CORS Policy issue

[spsarola]

I want to make call from Shopify store to create a draft order with Remix API (kind of ajax I have set)

	async function sachin() {
	  console.log("Sending OTP TRYyy...");

	  const res = await fetch("https://d0870bb651c6.ngrok-free.app/api/create-draftorder", {
		method: "POST",
		headers: { "Content-Type": "application/json" },
		body: JSON.stringify({
		  shop: Shopify.shop, // Shopify global var
		  phone: "+91 9558656777",
		}),
	  });

	  const data = await res.json();
	  console.log("Response:", data);
	}

Get Error

Access to fetch at 'https://d0870bb651c6.ngrok-free.app/api/send-otp' from origin 'https://upsellmaxx-checkout-ext-test-build-store.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.

this is api.create-draftorder.jsx

	import { json } from "@remix-run/node";
	import { logToFile } from "../utils/logger.server";

	const corsHeaders = {
	  "Access-Control-Allow-Origin": "https://extensions.shopifycdn.com", // or "*" for any origin
	  "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
	  "Access-Control-Allow-Headers": "Content-Type, Authorization",
	  "Access-Control-Max-Age": "86400", // cache preflight for 24h
	};

	export async function loader({ request }) {
	  logToFile(`Loader called for shop`);
	  if (request.method === "OPTIONS") {
		// Preflight request
		return new Response(JSON.stringify({ ok: true, message: "Success", data: "analyticDbResponse" }), { status: 200, headers: corsHeaders });
	  }

	  const url = new URL(request.url);
	  const shop = url.searchParams.get("shop");

	  logToFile(`Loader called for shop: ${shop}`);

	  if (!shop) {
		return new Response(
		  JSON.stringify({ message: "Missing data. Required: shop" }),
		  { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
		);
	  }

	  return new Response(
		JSON.stringify({ ok: true, message: "Success", data: "analyticDbResponse" }),
		{ status: 200, headers: { ...corsHeaders, "Content-Type": "application/json" } }
	  );
	}

	export async function action({ request }) {
	  logToFile(`Loader called for shop`);
	  if (request.method === "OPTIONS") {
		return new Response(JSON.stringify({ message: "Missing data: shop" }), { status: 200, headers: corsHeaders });
	  }

	  if (request.method === "POST") {
		const data = await request.json();

		if (!data.shop) {
		  return new Response(
			JSON.stringify({ message: "Missing data: shop" }),
			{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
		  );
		}

		// Do your DB logic here
		return new Response(
		  JSON.stringify({ message: "success" }),
		  { status: 200, headers: { ...corsHeaders, "Content-Type": "application/json" } }
		);
	  }

	  return new Response(
		JSON.stringify({ message: "Method not allowed" }),
		{ status: 405, headers: { ...corsHeaders, "Content-Type": "application/json" } }
	  );
	}

[nboliver-ventureweb]

@spsarola You will need to use app proxy to make requests from the frontend / theme to your app's backend.
General App Proxy docs: https://shopify.dev/docs/apps/build/online-store/display-dynamic-data#add-an-app-proxy
Remix Template docs: https://shopify.dev/docs/api/shopify-app-remix/v2/authenticate/public/app-proxy
Unfortunately the documentation is spread out in various places, and assumes a high level of experience with Shopify. Good luck!