Is it possible to use hono api with react router 7 loader?

[colesanderson]

I deployed a Hono API and a React Router 7 app using Cloudflare Workers. Both apps are working fine in local development, but in production, I cannot fetch data from the Hono API in the React Router loader.

Code:
React Router 7 Code:

export async function loader() {
  try {
    const apiUrl = "https://my-hono-app.colesanderson4.workers.dev/api/data";
    const response = await fetch(apiUrl, {
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (!response.ok) {
      console.error(`API responded with status: ${response.status}`);
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log("API Response Data:", data);
    return { message: data.message };
  } catch (error) {
    console.error("Error loading posts:", error.message, error.stack);
    return { message: "Error loading posts" };
  }
}
}

Hono API code:

import { Hono } from "hono";
import { cors } from "hono/cors";
const app = new Hono<{ Bindings: CloudflareBindings }>();

// Apply CORS to all routes under /api/*
app.use(
  "/api/*",
  cors({
    origin: "https://pharmacy-admin-app.colesanderson4.workers.dev", // Ensure the correct origin
    allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], // Allowed methods
    allowHeaders: ["Content-Type", "X-Custom-Header"], // Allowed headers
    credentials: true, // Allow credentials
  })
);

// GET request
app.get("/", (c) => {
  return c.text("Hello Hono!");
});

// GET request
app.get("/api/data", async (c) => {
  return c.json({ message: "Data received" });
});

export default app;

Cloudflare React Router 7 Logs errors

{
  "message": "Requesting Hono API at: https://my-hono-app.colesanderson4.workers.dev/api/data",
  "$cloudflare": {
    "event": {
      "request": {
        "url": "https://pharmacy-admin-app.colesanderson4.workers.dev/",
        "method": "GET",
        "path": "/"
      }
    },
    "scriptName": "pharmacy-admin-app",
    "eventType": "fetch",
    "executionModel": "stateless",
    "scriptVersion": {
      "id": "ca6ac6a4-3f2e-4725-94ad-b88d501b416a"
    },
    "truncated": false,
    "$metadata": {
      "requestId": "8fb50be37b3448ed"
    }
  }
}

{
  "message": "Response Status: 404",
  "$cloudflare": {
    "event": {
      "request": {
        "url": "https://pharmacy-admin-app.colesanderson4.workers.dev/",
        "method": "GET",
        "path": "/"
      }
    },
    "scriptName": "pharmacy-admin-app",
    "eventType": "fetch",
    "executionModel": "stateless",
    "scriptVersion": {
      "id": "ca6ac6a4-3f2e-4725-94ad-b88d501b416a"
    },
    "truncated": false,
    "$metadata": {
      "requestId": "8fb50be37b3448ed"
    }
  }
}

[
  [
    "cache-control",
    "private, max-age=0, no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
  ],
  [
    "cf-ray",
    "8fb50be3908a48ed-YVR"
  ],
  [
    "connection",
    "keep-alive"
  ],
  [
    "content-length",
    "16"
  ],
  [
    "content-type",
    "text/plain; charset=UTF-8"
  ],
  [
    "date",
    "Wed, 01 Jan 2025 19:51:51 GMT"
  ],
  [
    "expires",
    "Thu, 01 Jan 1970 00:00:01 GMT"
  ],
  [
    "referrer-policy",
    "same-origin"
  ],
  [
    "server",
    "cloudflare"
  ],
  [
    "x-frame-options",
    "SAMEORIGIN"
  ]
]

{
  "level": "error",
  "message": "Failed Response: 404 Not Found",
  "$cloudflare": {
    "event": {
      "request": {
        "url": "https://pharmacy-admin-app.colesanderson4.workers.dev/",
        "method": "GET",
        "path": "/"
      }
    },
    "scriptName": "pharmacy-admin-app",
    "eventType": "fetch",
    "executionModel": "stateless",
    "scriptVersion": {
      "id": "ca6ac6a4-3f2e-4725-94ad-b88d501b416a"
    },
    "truncated": false,
    "$metadata": {
      "requestId": "8fb50be37b3448ed"
    }
  }
}

{
  "level": "error",
  "message": "Loader Error: HTTP error! status: 404 Error: HTTP error! status: 404\n    at loader (index.js:23198:13)\n    at async callRouteHandler (index.js:22060:16)\n    at async commonRoute.loader (index.js:22174:19)\n    at async index.js:18985:19\n    at async callLoaderOrAction (index.js:19035:16)\n    at async Promise.all (index 0)\n    at async defaultDataStrategy (index.js:18911:17)\n    at async callDataStrategyImpl (index.js:18944:17)\n    at async callDataStrategy (index.js:18754:19)\n    at async loadRouteData (index.js:18720:19)",
  "$cloudflare": {
    "event": {
      "request": {
        "url": "https://pharmacy-admin-app.colesanderson4.workers.dev/",
        "method": "GET",
        "path": "/"
      }
    },
    "scriptName": "pharmacy-admin-app",
    "eventType": "fetch",
    "executionModel": "stateless",
    "scriptVersion": {
      "id": "ca6ac6a4-3f2e-4725-94ad-b88d501b416a"
    },
    "truncated": false,
    "$metadata": {
      "requestId": "8fb50be37b3448ed"
    }
  }
}

[colesanderson]

log from local dev:

Requesting Hono API at: https://my-hono-app.colesanderson4.workers.dev/api/data
Response Status: 200
Response Headers: [
  [ 'access-control-allow-credentials', 'true' ],
  [ 'alt-svc', 'h3=":443"; ma=86400' ],
  [ 'cf-ray', '8fb507ca08808414-YVR' ],
  [ 'connection', 'keep-alive' ],
  [ 'content-length', '27' ],
  [ 'content-type', 'application/json' ],
  [ 'date', 'Wed, 01 Jan 2025 19:49:03 GMT' ],
  [
    'nel',
    '{"success_fraction":0,"report_to":"cf-nel","max_age":604800}'
  ],
  [
    'report-to',
    '{"endpoints":[{"url":"https:\\/\\/a.nel.cloudflare.com\\/report\\/v4?s=H%2BxARwnh8TDRf5aj%2BpT69m0i2QXKVV9jatNdvkSS2kOGPSAEWAiHn9sfhsqvWX3ywdRsuZ0EFLv3y6ZxyzM%2F9bOrWtBAddXIXYNGOvUrydXKpc%2FQ9J5xWCfSPXzaovN%2BYeqNHzOTzNwNUcxjPP1rdv88KoXTz9M0Ypszw5Le7gu0q7Y2bA%3D%3D"}],"group":"cf-nel","max_age":604800}'
  ],
  [ 'server', 'cloudflare' ],
  [
    'server-timing',
    'cfL4;desc="?proto=TCP&rtt=3968&min_rtt=3853&rtt_var=1527&sent=4&recv=5&lost=0&retrans=0&sent_bytes=2887&recv_bytes=750&delivery_rate=1049571&cwnd=252&unsent_bytes=0&cid=f916480b3570f861&ts=233&x=0"'
  ],
  [ 'vary', 'Origin, Accept-Encoding' ]
]
Response Data: { message: 'Data received' }
--> GET / 200 861ms