Traefik 2覆盖上游服务MIME类型致Web应用异常

将原Nginx路由的项目迁移到Traefik 2.x后，Go服务可正常访问，但Vite返回的JS文件（如src/main.ts）的Content-Type被Traefik从application/javascript覆盖为text/vnd.trolltech.linguist，不符合<script>标签的合法MIME类型，引发CORS相关错误。

当前配置 #

traefik.yaml #

providers:
  docker:
    endpoint: unix:///var/run/docker.sock
    watch: true
    exposedbydefault: false

entryPoints:
  vite:
    address: ':5173'
  goapp:
    address: ':80'

docker-compose.yaml #

version: '3'

services:

  reverse-proxy:
    image: traefik:v2.4.7
    container_name: traefik
    labels:
      - "traefik.enable=true"
      - "traefik.http.middlewares.autodetect.contenttype.autodetect=true"
      - "traefik.http.routers.traefik=true"
    ports:
      - 80:80
      - 5173:5173
    restart: unless-stopped
    security_opt:
      - no-new-privileges:true
    volumes:
      - ./docker/traefik/traefik.yaml:/etc/traefik/traefik.yaml:ro
      - ./docker/certs:/etc/certs:ro
      - /var/run/docker.sock:/var/run/docker.sock:ro

  goapp:
    container_name: goapp
    image: vitestuff/goapp
    environment:
      - air_wd=/app/project
    build:
      context: docker/goproj
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.goapp.rule=Host(`app.localhost`)"
      - "traefik.http.services.goapp.loadbalancer.server.port=80"

    volumes:
      - consistency: cached
        source: .
        target: /app/project
        type: bind

  vite:
    container_name: vite
    image: vitestuff/vite-env
    ports:
      - "5173"
    build:
      context: docker/vitevol
      args:
        PORT: 5173
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.vite.rule=Host(`app.localhost:5173`)"
      - "traefik.http.services.vite.loadbalancer.server.port=5173"
    volumes:
      - consistency: consistent
        source: ./frontend
        target: /app/frontend
        type: bind

问题原因与解决方法 #

问题根源是Traefik配置的autodetect.contenttype中间件——该中间件会自动检测响应内容并覆盖原有Content-Type，而Traefik对.ts文件的MIME类型识别错误，将其判定为Qt Linguist专属的text/vnd.trolltech.linguist类型。

解决步骤：

1. 移除自动检测中间件：删除Traefik服务labels中的traefik.http.middlewares.autodetect.contenttype.autodetect=true，同时确保该中间件未绑定到任何路由。修改后的Traefik服务labels如下：

   labels:
     - "traefik.enable=true"
     - "traefik.http.routers.traefik=true"
   

2. 保留后端原生Content-Type：Vite本身已能正确处理.ts文件的MIME类型，移除Traefik的自动检测后，会直接沿用后端返回的application/javascript响应头。
3. 验证路由生效：重启Traefik容器后，访问http://app.localhost:5173/src/main.ts，检查响应头的Content-Type是否恢复为application/javascript。

若需保留自动检测功能，也可通过自定义Traefik的MIME类型映射修正识别错误，但直接移除自动检测是更高效的方案，因为后端已能返回正确的头信息。

内容的提问来源于stack exchange，提问作者Torenware Networks