svg文件被上传为"application/octet-stream“而不是"image/svg+xml”

Question

我正在使用Storybook创建一些故事，并将它们发布到我们的服务器上。

我们目前使用build-storybook命令构建静态文件。当使用指向我们构建的静态文件的命令start-storybook时，一切工作正常(即.svg图标呈现得很好)。

当我们将这些静态文件传输到我们用来为这些静态文件提供服务的服务器时，问题就出现了。

我们使用以下脚本来完成此操作：

find $name -type f -exec curl --fail --silent --show-error --output /dev/null -u CREDENTIALS --ftp-create-dirs -T {} ftp-server/{} \;

仅供参考。在上面的脚本中，我没有暴露我们的凭证和FTP服务器。这个脚本取自stackoverflow，它基本上允许我们将所有的静态文件传输到我们的服务器。

当从我们的服务器提供服务时，SVG图标不会加载到我们的故事中，因为它们的MIME类型被设置为application/octet-stream，而我们期望它们是image/svg+xml。

在运行文件传输命令之前，我确保我们的SVG包含正确的MIME类型，即它们是image/svg+xml。此外，在本地提供这些静态文件时，SVG呈现良好，因此这些svg最初包含正确的MIME类型。问题发生在文件传输过程中，它以某种方式将MIME类型从image/svg+xml转换为application/octet-stream。

我确保我们使用的是正确版本的curl ie。版本7.75，所以svg内容类型应该是recognized。此外，我还尝试通过headers设置内容类型，即-H "Content-Type: image/svg+xml"，我也遇到了同样的问题。

以下是我们通过FTP传输其中一个svg时的日志：

12:39:07 > PUT ftp-server/static/media/svg-defs.79d8a5f2.svg HTTP/1.1
12:39:07 > Host: ftp-server
12:39:07 > Authorization: Basic ****
12:39:07 > User-Agent: curl/7.75.0
12:39:07 > Accept: */*
12:39:07 > Content-Type: image/svg+xml
12:39:07 > Content-Length: 77366
12:39:07 > Expect: 100-continue
12:39:07 > 
12:39:07 { [5 bytes data]
12:39:07 * Mark bundle as not supporting multiuse
12:39:07 < HTTP/1.1 100 Continue
12:39:07 } [5 bytes data]
12:39:07 * We are completely uploaded and fine
12:39:07 { [5 bytes data]
12:39:07 * Mark bundle as not supporting multiuse
12:39:07 < HTTP/1.1 201 Created
12:39:07 < Date: Thu, 27 May 2021 16:39:07 GMT
12:39:07 < Content-Type: application/****
12:39:07 < Transfer-Encoding: chunked
12:39:07 < Connection: keep-alive
12:39:07 < Server: Artifactory/6.23.13
12:39:07 < Location: ftp-server/storybook/file-loader/static/media/svg-defs.79d8a5f2.svg
12:39:07 < 
12:39:07 { [835 bytes data]
12:39:07 
100 78189    0   823  100 {
12:39:07   "repo" : "****",
12:39:07   "path" : "/storybook/file-loader/static/media/svg-defs.79d8a5f2.svg",
12:39:07   "created" : "2021-05-27T16:39:07.759Z",
12:39:07   "createdBy" : "****",
12:39:07   "downloadUri" : "ftp-server/storybook/file-loader/static/media/svg-defs.79d8a5f2.svg",
12:39:07   "mimeType" : "application/octet-stream",
12:39:07   "size" : "77366",
12:39:07   "checksums" : {
12:39:07     "sha1" : "aec79d93b48becce503b590336027b040d604214",
12:39:07     "md5" : "83db7ccd983bafa823176c1ab7444d66",
12:39:07     "sha256" : "5feb84ec671e6332e3e2441563afa737545946e0c8b89438bc92935a493294b2"
12:39:07   },
12:39:07   "originalChecksums" : {
12:39:07     "sha256" : "5feb84ec671e6332e3e2441563afa737545946e0c8b89438bc92935a493294b2"
12:39:07   }

任何帮助我们都将不胜感激

Answer 1

将此标记为已解决。这是我们这边的web服务器配置。

编辑：

我们将静态文件托管在artifactory：https://jfrog.com/artifactory/中

在artifactory中，有一个文件，其中包含它支持的MIME类型的列表：$JFROG_HOME/artifactory/var/etc/artifactory/mimetypes.xml。

此文件可以编辑。事实证明，我们没有将MIME类型映射到.svg扩展名，因此我们的svg文件默认为application/octet-stream。修复方法只是编辑xml文件，使其包含缺少的mime类型。

有关更多信息，请访问：https://www.jfrog.com/confluence/display/JFROG/Configuration+Files#ConfigurationFiles-ModifyingConfigurationUsingtheRESTAPI