File extension/Image src does not end to server route but 404
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 15.1k
- Forks
- 1.9k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 143
Description
Which project does this relate to?
Start
Describe the bug
This behavior is a bit strange so I'll try to explain as best.
I have an API route like that :
// src/routes/api/files.ts
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/api/files")({
server: {
handlers: {
GET: async ({ request }) => {
return Response.json({
message: new URL(request.url).searchParams.get("filename"),
});
},
},
});
If I call this endpoint with :
http://localhost:3000/api/files?filename=something-> OK return the jsonhttp://localhost:3000/api/files?filename=something.png-> Returns error 404 : Cannot GET /api/fileshttp://localhost:3000/api/files?filename=something.png&test=test-> OK return the jsonhttp://localhost:3000/api/files?filename=something.pngwith headerAccept: text/html-> OK return the jsonhttp://localhost:3000/api/files?filename=anythinginside an img src (because of headerSec-Fetch-Dest: image?) -> Returns error 404 : Cannot GET /api/files
This because a big issue for create routes for img src.
Complete minimal reproducer
https://github.com/Zareix/tan-start-repro
Steps to Reproduce the Bug
- Create a GET server route
- Call it with a searchParams that as a image file extension
Expected behavior
It should send request to the server route everytime
Screenshots or Videos
No response
Platform
- Router / Start Version: 1.169.2
- OS: macOS
- Browser: Chrome
- Browser Version: 148.0.7778.96
- Bundler: vite (with bun)
- Bundler Version: 8.0.11
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the minimal reproducer and the route shown in src/routes/api/files.ts, then run the listed requests in Chrome with and without the image-like filename and headers. Trace how the server route handles these requests and compare the failing response with the successful cases. Done means the GET route returns its JSON consistently for image-style query values and image requests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- api, backend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100