问题

halo2 配置 umami 之后有跨域问题,umami 使用 traefik 做代理 1679038670294.png

解决方法

docker 配置方式

如果使用 docker 部署 traefik 和 umami 可以参考这个 这里贴出部署 umami 的 docker-compose.yml,具体解释在文件注释中

version: '3.3'

services:
  umami:
    image: ccr.ccs.tencentyun.com/orilight/umami-mysql:1.40.0 # umami的镜像托管在github,下载很慢,这是一个国内博主提供的镜像
    container_name: umami
    restart: always
    ports:
      - "13000:3000"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.umami.rule=Host(`umami.xxxxxx.com`)" # 需要修改它 # 创建了一个名叫 umami 的路由,并给路由加了一个规则,就可以通过配置的域名访问 umami
      - "traefik.http.routers.umami.service=umami" # 将 umami 服务和路由绑定
      - "traefik.http.services.umami.loadbalancer.server.port=3000" # 指定 umami 服务的端口,需要指定容器内部端口,traefik 会通过 docker 的网桥来访问 umami
      - "traefik.http.middlewares.umamiheader.headers.accessControlAllowOriginList=https://www.xxxxxx.com" # 需要修改它 # 设置允许跨域的域名
      - "traefik.http.middlewares.umamiheader.headers.accesscontrolallowmethods=GET,OPTIONS,PUT" # 设置允许跨域的方法
      - "traefik.http.middlewares.umamiheader.headers.accessControlAllowHeaders=DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization"
      - "traefik.http.middlewares.umamiheader.headers.accesscontrolmaxage=100"
      - "traefik.http.middlewares.umamiheader.headers.addvaryheader=true"
      - "traefik.http.middlewares.umamiheader.headers.customresponseheaders.content-security-policy=frame-ancestors www.xxxxxx.com" # 需要修改它 # 设置允许跨域的域名
      - "traefik.http.routers.umami.middlewares=umamiheader" # 将中间件和路由绑定
    environment:
      - "DATABASE_URL=mysql://username:password@ip:3306/database" # 需要修改它 # 填写你的mysql连接信息,如果是 postgresql 则改为 postgresql://username:password@db:5432/databasename
      - "DATABASE_TYPE=mysql" # 需要修改它 # 如果使用MySQL 则不需要修改,如果是 postgresql 改为 postgresql即可
      - "HASH_SALT=random string" # 需要修改它 # 填写一个随机字符串

networks:
  default:
    name: my-bridge # 需要修改它 # 填写你的网桥名称,注意:docker-compose 不能使用默认的网桥

文件配置方式

如果单独部署的 umami 可以参考这个 这里贴出 traefik 的配置文件

http:
  routers:
    umami: # 创建了一个名叫 umami 的路由
      rule: "Host(`unami.xxx.com`)" # 需要修改它 # 给路由加了一个规则,就可以通过配置的域名访问 umami
      service: umami # 将 umami 服务和路由绑定
      middlewares: umamiheader # 将中间件和路由绑定

  services:
    umami:
      loadBalancer:
        servers:
        - url: "https://192.168.10.11:3000" # umami 的地址

  middlewares:
    umamiheader:
      headers:
        accessControlAllowOriginList: "https://www.xxxxxx.com" # 需要修改它 # 设置允许跨域的域名
        accesscontrolallowmethods: "GET,OPTIONS,PUT" # 设置允许跨域的方法
        accessControlAllowHeaders: "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization"
        accesscontrolmaxage: 100
        addvaryheader: true
        customresponseheaders: "content-security-policy=frame-ancestors www.xxxxxx.com" # 需要修改它 # 设置允许跨域的域名

参考:

  1. Halo 2.0 对 Umami 的集成
  2. 使用Docker搭建umami统计程序
  3. Traefik官方文档 - CORS Headers
  4. CORS - How to make it work with Traefik v2.x
  5. 打破 iframe 安全限制的 3 种方案