设置CORS请求模式却无预检请求，如何触发预检或解决跨域报错？

为什么没有发送预检请求？ #

浏览器仅会对非简单请求发起OPTIONS预检。你的请求属于简单请求范畴：

• 请求方法为GET
• 请求头字段均在简单请求允许的列表内（Accept、Accept-Language、DNT、Pragma、Cache-Control等）
• 无自定义请求头

因此浏览器不会触发预检，直接发送GET请求；后续因服务器响应缺少Access-Control-Allow-Origin头，导致跨域报错。

消除报错的核心方案 #

1. 配置服务器添加CORS响应头 #

这是最根本的解决方式，在anonymized.com的服务器上配置：

• 添加Access-Control-Allow-Origin: https://www.anonymized.de（指定允许的来源），生产环境不推荐用*允许所有来源
• 若需携带凭证（如Cookie），需额外添加Access-Control-Allow-Credentials: true，此时Access-Control-Allow-Origin不能设为*

以Nginx为例，配置示例：

location ~* \.woff2$ {
    add_header Access-Control-Allow-Origin https://www.anonymized.de;
    add_header Access-Control-Allow-Credentials true;
}

2. 前端侧规避跨域 #

• 将字体资源迁移至https://www.anonymized.de域名下，与页面同域，彻底避免跨域问题
• 通过webpack配置内联字体资源：用url-loader将小体积字体转为base64嵌入代码，无需单独发起请求

强制触发预检请求的方法（不推荐） #

若一定要让浏览器发送OPTIONS预检，可修改请求使其变为非简单请求：

• 添加自定义请求头，比如X-Custom-Header: any-value

但该方案会增加请求开销，且需服务器额外支持OPTIONS预检（返回Access-Control-Allow-Headers等响应头），属于舍近求远的操作，不建议采用。

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