TinyMCE自托管于AWS S3，字体加载遇403权限拒绝问题求助

你的问题核心在于字体请求的Referer并非你页面的域名，而是加载CSS文件的S3桶地址，导致存储桶策略里的aws:Referer匹配条件不满足，直接返回了403 Forbidden。

从你提供的请求头能明确看到：

Referer: https://.amazonaws.com//tinymce/js/tinymce/skins/lightgray/skin.min.css

这个Referer是S3桶的地址，但你的存储桶策略只允许http(s)://127.0.0.1:3000/*作为合法Referer，所以字体文件的GetObject请求被拦截了。

1. 更新S3存储桶策略，添加S3桶域名到允许的Referer列表 #

修改策略中的aws:Referer条件，把你的S3桶完整域名路径加入允许列表，这样CSS引用的字体请求就能通过校验：

{
  "Version": "2012-10-17",
  "Id": "<some-id>",
  "Statement": [
    {
      "Sid": "<some-id>",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<bucket-name>/*",
      "Condition": {
        "StringLike": {
          "aws:Referer": [
            "http://127.0.0.1:3000/*",
            "https://127.0.0.1:3000/*",
            "https://<bucket-location>.amazonaws.com/<bucket-name>/*"
          ]
        }
      }
    }
  ]
}

2. 优化CORS配置（可选但推荐） #

当前你的CORS允许所有Origin，为了兼顾安全性和功能，建议明确指定允许的Origin，包括你的页面域名和S3桶域名：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://127.0.0.1:3000</AllowedOrigin>
    <AllowedOrigin>https://127.0.0.1:3000</AllowedOrigin>
    <AllowedOrigin>https://<bucket-location>.amazonaws.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader> <!-- 确保允许必要的跨域请求头 -->
  </CORSRule>
</CORSConfiguration>

3. 验证TinyMCE的资源路径配置 #

确保TinyMCE的资源加载路径正确，你可以在编辑器配置中添加base_url，明确指向S3上的TinyMCE根目录：

export const editor = {
  elementpath: false,
  branding: false,
  height: '100%',
  resize: false,
  protocol: 'https',
  base_url: 'https://<bucket-location>.amazonaws.com/<bucket-name>/tinymce' // 替换为你的实际S3路径
}

浏览器的同源策略下，当页面加载来自S3的CSS文件时，CSS中引用的字体资源请求，其Referer会被设置为CSS文件的URL（即S3地址），而非页面的Origin。这就是为什么你原本的策略会拦截字体请求——它只认可页面域名作为合法Referer，却忽略了CSS所在的S3地址。

内容的提问来源于stack exchange，提问作者Mr.wiseguy