无法解码下载的字体，使用 nginx 部署 Angular 6 应用程序时出现 OTS 解析错误答案

【问题标题】：Failed to decode downloaded font, OTS prasing error on Angular 6 app deployed with nginx无法解码下载的字体，使用 nginx 部署 Angular 6 应用程序时出现 OTS 解析错误
【发布时间】：2018-06-28 13:27:05
【问题描述】：

我已经在 ngnix 上部署了具有以下结构的 angular dist 文件夹。但是得到Failed to decode downloaded font: host/rfid/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0; OTS parsing error: invalid version tag 错误。

这是我添加字体的方法。

package.json

"dependencies": {
-------
"font-awesome": "^4.7.0",
--------
}

angular.json

"styles": [
-----,
"node_modules/font-awesome/scss/font-awesome.scss",
-----
]

这是我部署 dist 文件夹的路径。

/user/www/data/rfid/dist

以下是我的 nginx 配置文件 default.conf。

proxy_cache_path /tmp/nginx levels=1:2 keys_zone=nginx_cache_zone:10m inactive=60m;
proxy_cache_key "$scheme$request_method$host$request_uri";

client_max_body_size 20M;
proxy_read_timeout 600;

server {
    listen 80 default_server;
    server_name something;
    location /rfid/ {
      alias /user/www/data/rfid/dist/;
      try_files $uri$args $uri$args/ /rfid/index.html;
   }
}

让我也包括我的构建的样子。

我在这里缺少什么？提前致谢。

编辑：如果这是将查询字符串附加到正在查找文件的 url 的问题，当我只指定依赖项并添加 sass 文件时，我能做什么？

【问题讨论】：

标签： angular nginx angular6

【解决方案1】：

在我将 Font Awesome 4.7.0 作为 NPM 依赖项引入时，OP 遇到了同样的问题，无法控制修改 font-url。

我们最终更改了 Nginx 的 try_files 配置，以便在没有 $args 的情况下也检查 $uri。

所以来自：

try_files $uri$args $uri$args/ /rfid/index.html;

你可以选择：

try_files $uri$args $uri$args/ $uri $uri/ /rfid/index.html;

如果您采用这种方法，请确保您了解对网站其他部分的影响。

根据提交者的comment 和this GitHub 问题，另一种选择是升级到不再使用版本字符串的Font Awesome 5.x。

【讨论】：

【解决方案2】：

我发现对于这类问题，最好的办法是检查依赖库上的问题跟踪器。大多数情况下，您会找到遇到相同问题的其他人。

I dropped your error in the font-awesome issue tracker 似乎有些人遇到过类似的问题：

Try removing the ?v=4.6.3 query string from your CSS.

例子：

@font-face {
  font-family: 'FontAwesome';
  src: font-url("font-awesome/fonts/fontawesome-webfont.eot");
  src: font-url("font-awesome/fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), font-url("font-awesome/fonts/fontawesome-webfont.woff2") format('woff2'), font-url("font-awesome/fonts/fontawesome-webfont.woff") format('woff'), font-url("font-awesome/fonts/fontawesome-webfont.ttf") format('truetype'), font-url("font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

希望对您有所帮助。

【讨论】：

正如我所解释的，我没有编写任何 CSS。仅将其添加为由 npm 安装的依赖项，然后包含 sass 文件。我在哪里进行您提议的更改？

【解决方案3】：

我在 tomcat 中部署 angular 8 应用时遇到了同样的问题。

我使用的是 maven 资源过滤，它被应用于整个应用程序。这意味着过滤也适用于 fontawesome 文件。

我通过将过滤限制在必要的文件夹中解决了这个问题。

<resources>
    <resource>
          <directory>${basedir}/dist/app</directory>
          <excludes>
              <exclude>**/assets/**</exclude>
          </excludes>
    </resource>
    <resource>
          <directory>${basedir}/dist/app/assets</directory>
          <filtering>true</filtering>
          <targetPath>assets</targetPath>
    </resource>
</resources>

【讨论】：