为什么我的 nginx 网络服务器不处理 ttf 字体？答案

【问题标题】：Why isn't my nginx web server handling ttf fonts?为什么我的 nginx 网络服务器不处理 ttf 字体？
【发布时间】：2019-06-07 20:42:09
【问题描述】：

我一直在研究这个问题，即由于 CORS 限制，特定字体文件无法在远程站点上呈现。

到目前为止，我已经能够确定对该 url 的请求以 access-control-allow-origin 进行响应，但 nginx 在远程发出时拒绝该字体的请求。

我正在使用 laravel 和 spatie 的 laravel-cors 插件，但我认为这不会返回未从 laravel 路由呈现的样式表或字体的标题信息。

有人知道为什么会这样吗？

我的错误

Access to font at 'https://example.com/css/widget-icons/icomoon.ttf?wiodlm' from origin 'http://www.second-example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

通过 curl 检索到的标头（似乎允许 curl 请求）

curl -I https://example.com/css/widget-icons/icomoon.ttf?wiodlm

HTTP/2 200 
date: Sun, 13 Jan 2019 16:57:34 GMT
content-type: application/x-font-ttf
content-length: 1316
set-cookie: AWSALB=r3yRudj6XwTlfaFzEdtxrecHzLLplOKlpRMbKuqL8InwUQYylNVFaZtmGHK2wQDgjvaXsBtRVcTCyjWidjTFUFmoDzKLBLH0gL6qarns38Qn4FuDNCZogawHtOjD; Expires=Sun, 20 Jan 2019 16:57:34 GMT; Path=/
server: nginx/1.14.1
last-modified: Tue, 25 Dec 2018 05:42:49 GMT
etag: "5c21c359-524"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes

我的 nginx 配置为 Access-Control-Allow-Origin（已设置为正确区分大小写）。

location ~* .(gif|jpg|jpeg|png|ico|wmv|3gp|avi|mpg|mpeg|mp4|flv|mp3|mid|js|css|wml|swf|ttf|ttc|otf|eot|woff|woff2)$ {
        add_header Access-Control-Allow-Origin "*";
        expires max;
}

为传递 ttf 添加了 Mime 类型

application/x-font-ttf           ttc ttf;
application/x-font-otf           otf;
application/font-woff                            woff;
application/font-woff2           woff2;

【问题讨论】：

浏览器不关心标题的大小写。您应该查看问题的不同原因。您可能想要爆破缓存；到期时间看起来很遥远

标签： laravel nginx cors nginx-config

【解决方案1】：

我通过将用于 ttf 的 mime.types 从 application/x-font-ttf 修改为 font/ttf 解决了这个问题。

我的 nginx 配置

    location ~* .(js|css|ttf|ttc|otf|eot|woff|woff2)$ {
            add_header access-control-allow-origin "*";
            expires max;
    }

mime.types 文件

mime.types edit. 
    application/x-font-ttf           ttc;
    application/x-font-otf           otf;
    application/font-woff2           woff2;
    font/ttf                         ttf;

【讨论】：

【解决方案2】：

在尝试让 CORS 在 nginx + Lumen 堆栈上正常工作时，我遇到了类似的错误。最终，我最终删除了用于启用 CORS 的 nginx 虚拟主机端配置，并使用自定义中间件来处理请求。 laravel-cors这个插件我没用过，不过为了测试，你可以试试这个简单的解决方案：

<?php
namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next) {
        $headers = [
            'Access-Control-Allow-Origin'      => '*',
            'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Origin, Content-Type, Authorization, X-Requested-With'
        ];
        if ($request->isMethod('OPTIONS')) {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }
        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }
        return $response;
    }
}

【讨论】：

这并没有解决我的问题，但它是解决 cors 问题的好方法。

【解决方案3】：

我在使用 nextcloud 时遇到了问题。添加woff2就足够了

   location ~* \.(?:svg|gif|png|html|ttf|woff|woff2|ico|jpg|jpeg)$ {
        try_files $uri /index.php$uri$is_args$args;
        # Optional: Don't log access to other assets
        access_log off;
   }

【讨论】：