css - 为什么 CSS 数据 URI 会被记录为 404 请求？

Question

为了减少我们网站上的请求数量，我们使用 CSS 数据 URI，而不是链接到外部图像。出于某种原因，这些数据 URI 有时仍会被记录为针对我们服务器的 404 请求。为什么会发生这种情况？

随机细节：

• 我们正在使用Splunk进行跟踪
• 发生在多个数据 URI 上
• 发生在所有浏览器上
• 在我们网站的多个页面上
• 我们的 QA 无法复制该问题
• 以下是特定数据 URI 的结果
• 相关 CSS 文件 - ( http://c.mfcreative.com/lib/tgn/combo.ashx?14/css/v1/main.css )
• 同一文件的未缩小版本 - ( http://c.mfcreative.com/lib/tgn/combo.ashx?14/css/v1/main.css&minify=false 见第 35 行

相关CSS：

body{background:#e2decd url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGuCAIAAADeSvtRAAAAfUlEQVQ4y9WTzQ7AIAiD+fr+rzzYSeOWGP+z7MABwVJstYiQmf02zvP3yrk2442Gqvijb9LT34tJ7vVP5u/zTBzDP113n/eYCv3ec1IOLGjn1bu9+K0zQEad/4r/iMj8dvLfVqetfcsf5X6z/y7ieuVk/SU19wMesxMXQMANapSO6rYFQnIAAAAASUVORK5CYII=) repeat-x 0 0}

查询以查看我们所有的 404 错误（在我们的前 10 个 404 错误中有 5 个数据 URI）：

sourcetype=iis* host=prd*ssscdn* sc_status=404 | top 100 cs_uri_stem

生成下图的查询：

sourcetype=iis* host=prd*ssscdn* sc_status=404 cs_uri_stem="/lib/tgn/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGuCAIAAADeSvtRAAAAfUlEQVQ4y9WTzQ7AIAiD+fr+rzzYSeOWGP+z7MABwVJstYiQmf02zvP3yrk2442Gqvijb9LT34tJ7vVP5u/zTBzDP113n/eYCv3ec1IOLGjn1bu9+K0zQEad/4r/iMj8dvLfVqetfcsf5X6z/y7ieuVk/SU19wMesxMXQMANapSO6rYFQnIAAAAASUVORK5CYII="

---

任何帮助/指导将不胜感激！

---

替代文字 http://www.jasonbuckboyer.com/playground/blah/data-uri-404-error1.png

Answer 1

我同意 Srikanth 的评论。在我看来，您的代码中有一些东西附加/lib/tgn/到url字符串的前面，最终将其放在之前data生产/lib/tgn/data:image/png，这是无效的。

如果它是数据 uri，您需要跟踪该代码并让它忽略所有字符串，同时仍然允许它将图像路径附加到在/lib/tgn/目录中保存和访问的图像。

添加说明

根据您的评论，我不确定我们是否沟通得非常清楚。我在您上面发布的“生成下图的查询”代码中看到的是：

cs_uri_stem="/lib/tgn/data:image/png;base64,iVBORw0KGgo... [etc.]"

您发布的图像显示了cs_uri_stem所有/lib/tgn/在data:image/png. 某些东西（可能是您的 CDN 组合，可能是您服务器上的 url 重写规则或其他东西）似乎导致该代码在处理/请求时/lib/tgn/被添加到 css代码中（因为它似乎没有被直接添加到您的缩小或扩展代码的 CSS 均未显示它已添加）。但是您发布的图像显示的最终结果表明导致 404 错误都在. 因此浏览器最终不会将其视为数据，因为请求以路径开头url()cs_uri_stem/lib/tgn/data:image/pngurl()，即/lib/tgn/data:image/png ...。因为它认为它正在寻找一个从路径开始的文件，/lib/tgn/所以浏览器正在发出一个请求，（当然）它永远不会得到满足，因此会产生 404 错误。

现在，也许我仍然不清楚您在评论中所指的内容，但也许我已经更清楚了我认为您的问题是什么。