为什么我的 nginx 网络服务器不处理 ttf 字体?
Why isn't my nginx web server handling ttf fonts?
我一直在研究这个问题,由于 CORS 限制,特定字体文件无法在远程站点上呈现。
到目前为止,我已经能够确定 url 的请求正在响应 access-control-allow-origin,但是 nginx 在远程发出时拒绝对该字体的请求。
我正在使用 laravel 和来自 spatie 的 laravel-cors 插件,但我不认为 return header 样式信息 sheet 或未从 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.
Header 通过 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;
}
已添加 Mime 类型以传递 ttf
application/x-font-ttf ttc ttf;
application/x-font-otf otf;
application/font-woff woff;
application/font-woff2 woff2;
我在尝试让 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;
}
}
我通过将用于 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;
我对 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;
}
我一直在研究这个问题,由于 CORS 限制,特定字体文件无法在远程站点上呈现。
到目前为止,我已经能够确定 url 的请求正在响应 access-control-allow-origin,但是 nginx 在远程发出时拒绝对该字体的请求。
我正在使用 laravel 和来自 spatie 的 laravel-cors 插件,但我不认为 return header 样式信息 sheet 或未从 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.
Header 通过 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;
}
已添加 Mime 类型以传递 ttf
application/x-font-ttf ttc ttf;
application/x-font-otf otf;
application/font-woff woff;
application/font-woff2 woff2;
我在尝试让 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;
}
}
我通过将用于 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;
我对 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;
}