I am trying to fix a CORS error that I am getting in my shopify extension. This is the error that I am getting: Access to XMLHttpRequest at 'https://plugins-dashboard.coddle/api/shop-configuration' from origin 'https://cdn.shopify.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. The plugins-dashboard is where I am sending the data to from the extension, it is a review feedback extension. The api/shop-configuration should lead to my routes file in the shopify app, but it doesn't do that. The code below is my index.tsx code in my shopify extension: async function fetchShopConfiguration(shopDomain: string) { const url = `${APP_URL}/api/shop-configuration`; try { const response = await axios.post( url, { shopURL: shopDomain }, { headers: { "Content-Type": "application/json", Accept: "application/json", 'Access-Control-Allow-Origin': 'https://cdn.shopify.com', 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Accept', }, }, ); return response.data; } catch (error) { console.error("Error:", error); } } extend( "Checkout::PostPurchase::ShouldRender", async ({ inputData: { initialPurchase: { lineItems }, shop: { domain: shopDomain }, }, storage, }) => { const shopconfiguration = await fetchShopConfiguration(shopDomain); await storage.update({ initialData: { rating: 0, feedback: "", shopconfiguration: shopconfiguration, orderId: lineItems[0].product.id, }, }); return { render: shopconfiguration.extensionEnabled === true ? true : false, }; }, ); The following is in my /app/route file as api.shop-configuration.ts: import { json, LoaderFunction, ActionFunction } from "@remix-run/node"; import axios from "axios"; const APP_URL = process.env.PLUGINS_DASHBOARD_URL; // Loader function to handle GET requests export const loader: LoaderFunction = async ({ request }) => { if (request.method === 'OPTIONS') { return json({}, { headers: { 'Access-Control-Allow-Origin': 'https://cdn.shopify.com', 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Accept', }, }); } // ... }; // Action function to handle POST requests export const action: ActionFunction = async ({ request }) => { console.log("POST request"); const data = await request.json(); const { shopURL } = data; console.log("Shop URL:", shopURL); // URL to forward the feedback data const url = `${APP_URL}/shopify/v2/shop-configuration?shopURL=${encodeURIComponent(shopURL)}`; try { // Send the feedback data to the external URL const response = await axios.get(url, { headers: { "Content-Type": "application/json", Accept: "application/json", 'Access-Control-Allow-Origin': 'https://cdn.shopify.com', 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Accept', }, }); // Return the response from the external URL return json(response.data); } catch (error) { // Handle error as needed return json({ error: "Shop Confiuration not found" }, { status: 404 }); } }; some help would be appreciated. I tried to add CORS headers to my external domain, the plugin dashboard one, but still get the same error. I have test the URL in my api file and I get them in the browser with the data. I think that the browser thinks that the route is external domain, while it is using the external domain as the main point to the api files that is being called, or am I wrong about this.