Cloudflare Developers•2w ago

OAuth token request works locally but fails in prod and with `wrangler pages dev`

I have an Astro app with a page that gets a list of pets from the Petfinder API and displays them to the user. In order to auth with the API, I must first request a token from: https://api.petfinder.com/v2/oauth2/token. Ok, thats fine...it works locally, I get the oauth token and then correctly get the response from https://api.petfinder.com/v2/animals. When I push to my Workers & Pages cloudflare prod env, it fails and when testing with wrangler pages dev ./dist it fails running with wrangler pages:

petfinder.astro.mjs:95 Petfinder API error: Error: Failed to get token: 403 Forbidden - <html><head><title>Access Denied</title></head><body><h1>Access Denied</h1>You don't have permission to access "/v2/oauth2/token" on this server.<br/>0.a1c0ce17.1731210162.14ca9d7c</body></html>

petfinder.astro.mjs:95 Petfinder API error: Error: Failed to get token: 403 Forbidden - <html><head><title>Access Denied</title></head><body><h1>Access Denied</h1>You don't have permission to access "/v2/oauth2/token" on this server.<br/>0.a1c0ce17.1731210162.14ca9d7c</body></html>

running in prod

// trucated for readability
{
    "error": "Failed to fetch data from Petfinder",
    "details": "Failed to get token: 403 Forbidden - <!doctype html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:og=\"http://ogp.me/ns#\" lang=\"en-US\">\r\n<html><head>\r\n<title>This site is temporarily unavailable | Nestlé </title>\r\n..."
}

// trucated for readability
{
    "error": "Failed to fetch data from Petfinder",
    "details": "Failed to get token: 403 Forbidden - <!doctype html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:og=\"http://ogp.me/ns#\" lang=\"en-US\">\r\n<html><head>\r\n<title>This site is temporarily unavailable | Nestlé </title>\r\n..."
}

My front end React calls my Astro endpoint

// Front End
// components/dogs.tsx
const response = await fetch(`/api/petfinder?page=${page}`);

// Front End
// components/dogs.tsx
const response = await fetch(`/api/petfinder?page=${page}`);

// Endpoint ** See Attachment **
// src/pages/api/petfinder.ts

// Endpoint ** See Attachment **
// src/pages/api/petfinder.ts

Spinning in circle's for a few hours and looking for outside help. Any advice and information would be greatly appreciated

endpoint.tsx

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

OAuth token request works locally but fails in prod and with `wrangler pages dev`