Vite/React Static Site API Calls Misdirected to Frontend Domain (Even with Hardcoded URL)

1

Hi Render Community,

I’m encountering a persistent and puzzling issue with my deployed Vite/React frontend static site (ashlight-frontend at https://ashlight-frontend.onrender.com) where its GraphQL API calls are being misdirected. Instead of going to my Render-hosted backend service (ashlight-backend at https://ashlight-backend.onrender.com), the requests are somehow being sent to the frontend’s own domain (https://ashlight-frontend.onrender.com/graphql).

This happens primarily after user login when the application attempts to fetch data. The result is a 200 OK response (likely index.html or an empty response from the static server) which then causes an ApolloError: ServerParseError - Unexpected end of JSON input in the client because it’s not valid JSON.

What I’ve Confirmed/Tried:

  1. Environment Variable (VITE_API_BASE_URL):
  • Correctly set in ashlight-frontend’s environment settings on Render to https://ashlight-backend.onrender.com.
  • Console logs from the deployed apolloClient.js confirm import.meta.env.VITE_API_BASE_URL is read correctly and the Apollo Client httpLink is initialized with the correct target URI (https://ashlight-backend.onrender.com/graphql).
  • Despite this, Network tab shows requests going to https://ashlight-frontend.onrender.com/graphql.
  1. Hardcoded Absolute URL Test:
  • I modified apolloClient.js to hardcode the absolute backend URL ('https://ashlight-backend.onrender.com/graphql') directly into the createHttpLink configuration, bypassing environment variables entirely.
  • After a “Clear build cache and deploy,” the browser’s Network tab still showed the GraphQL request being sent to https://ashlight-frontend.onrender.com/graphql.
  1. Caching Attempts:
  • Consistently tested with hard refreshes and in Incognito/Private browser windows.
  • Attempted to set aggressive Cache-Control headers via static.json (though Render Support clarified this isn’t the method for static sites and deployments should invalidate the CDN cache anyway. The correct method is via the dashboard “Headers” page, which I haven’t tried yet for Cache-Control as the hardcoding test failure makes CDN caching of old JS seem less likely to be the sole root cause).
  1. Render Settings Checked:
  • Redirects & Rewrites: The “Redirects & Rewrites” section for ashlight-frontend in the Render dashboard is empty.
  • Monorepo Settings: Root Directories for both frontend (client/) and backend (server/) services are believed to be set correctly. Build commands are standard (npm install && npm run build for client, npm install for server).
  1. Backend Functionality:
  • Direct curl tests to https://ashlight-backend.onrender.com/graphql (with necessary headers) and other test endpoints on the backend succeed and return expected JSON/responses.
  • Backend logs show no incoming requests from the deployed frontend when the misdirection occurs.

Project Details:

  • Frontend: Vite, React, Apollo Client, deployed as a Static Site on Render.
  • Backend: Node.js, Express, Apollo Server, Mongoose, deployed as a Web Service on Render.
  • Repository (Public): https://github.com/wileland/AE
  • Frontend Live URL: https://ashlight-frontend.onrender.com
  • Backend Live URL: https://ashlight-backend.onrender.com

My Question for the Community:

Has anyone experienced a similar issue where a static site on Render misdirects API calls to its own domain, even when an absolute URL to another Render service is explicitly configured or hardcoded in the client-side JavaScript? Any insights into what might be causing this at the Render platform level, build process, or networking layer would be greatly appreciated.

I have an ongoing support ticket with Render, but I’m hoping for any community wisdom as well.

Thanks for any help or suggestions!

Will

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.