TanStack / TanStack/router

File extension/Image src does not end to server route but 404

Open
#7,403 9 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs-upstream-fix
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 json
  • http://localhost:3000/api/files?filename=something.png -> Returns error 404 : Cannot GET /api/files
  • http://localhost:3000/api/files?filename=something.png&test=test -> OK return the json
  • http://localhost:3000/api/files?filename=something.png with header Accept: text/html -> OK return the json
  • http://localhost:3000/api/files?filename=anything inside an img src (because of header Sec-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
  1. Create a GET server route
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.