Skip to content

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

@Zareix

Description

@Zareix

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions