html - 移动 Safari 浏览器中的 CSS 文件加载问题
问题描述
我使用 reactJs、nodeJs(快速服务器)创建了网站。客户很高兴等等,但是......有一些客户可以重现的问题(我无法重现它)。这个问题似乎只发生在 iPhone 设备(Safari 浏览器)上。客户登录系统后,会显示空白页面(因此,css 未正确加载)。错误消息: 没有在 ... 解析样式表,因为在严格模式下不允许非 CSS MIME 类型。
事实:
- 页面刷新后一切正常,加载css没有错误
- 通过使用浏览器的私有模式- 一切正常
- 响应的内容类型 - “text/css; charset=UTF-8”
- 像这样将 CSS 添加到 html 标头标签中:
<link href="/static/css/main.b68c3443.css" rel="stylesheet">
- 用户代理:Mozilla/5.0(iPhone;CPU iPhone OS 12_1_2,如 Mac OS X)AppleWebKit/605.1.15(KHTML,如 Gecko)版本/12.0 Mobile/15E148 Safari/604.1
- 如果客户清除浏览器缓存 - 一切正常几次
工作流程:
- 客户在登录页面中输入凭据
- 重定向到加载页面(必须加载css文件),这里放置了react app。路径:/登录
- react 应用重定向到主页(页面未重新加载),路径:/home
索取资料:
"request": {
"method": "GET",
"url": "<domain here>/static/css/main.b68c3443.css",
"httpVersion": "HTTP/1.1",
"headers": [
{
"name": "Accept",
"value": "text/css,*/*;q=0.1"
},
{
"name": "Referer",
"value": "https://<domain here>/login"
},
{
"name": "DNT",
"value": "1"
},
{
"name": "Host",
"value": "<domain here>"
},
{
"name": "User-Agent",
"value": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1"
},
{
"name": "Accept-Language",
"value": "da-dk"
},
{
"name": "Accept-Encoding",
"value": "br, gzip, deflate"
},
{
"name": "Connection",
"value": "keep-alive"
}
],
"queryString": [],
"headersSize": 589,
"bodySize": 0
}
回复信息:
"response": {
"status": 200,
"statusText": "OK",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [
{
"name": "Content-Type",
"value": "text/css; charset=UTF-8"
},
{
"name": "Accept-Ranges",
"value": "bytes"
},
{
"name": "Pragma",
"value": "no-cache"
},
{
"name": "Expires",
"value": "-1"
},
{
"name": "Transfer-Encoding",
"value": "Identity"
},
{
"name": "Cache-Control",
"value": "private, max-age=0, no-cache, no-store, must-revalidate"
},
{
"name": "Date",
"value": "Fri, 25 Jan 2019 11:16:01 GMT"
},
{
"name": "Access-Control-Allow-Credentials",
"value": "true"
},
{
"name": "Connection",
"value": "keep-alive"
},
{
"name": "ETag",
"value": "ef9275a5-7313-4124-b4f9-aac59d8d35bd"
},
{
"name": "Vary",
"value": "*"
},
{
"name": "Last-Modified",
"value": "Fri, 25 Jan 2019 08:16:41 GMT"
},
{
"name": "X-Powered-By",
"value": "Express"
},
{
"name": "Strict-Transport-Security",
"value": "max-age=31536000; includeSubDomains"
}
],
"content": {
"size": 58191,
"compression": 0,
"mimeType": "text/css",
"text": "@font-face{ <css content> /*# sourceMappingURL=main.b68c3443.css.map*/"
},
"redirectURL": "",
"headersSize": 498,
"bodySize": 58191,
"_transferSize": 58689
},
"cache": {},
"_fetchType": "Network Load"
}
我认为它与浏览器缓存有某种关系,所以我尝试仅为 iPhone 设备禁用缓存,但没有运气。调试非常困难,因为我无法在我的测试 iphone 上重现。我还没有尝试过 -从响应标头中删除Accept-Ranges 。也许这个标题可能是问题的原因?你有什么想法 ?将样式添加到内联 html 页面的想法是非常丑陋的解决方案......
解决方案
推荐阅读
- javascript - Promise 对象内的 setTimeout
- database - 如何让 Postgres 使用受信任的 SSL 证书对另一个 Postgres 数据库进行 dblink
- intellij-idea - 如何更正 Intellij 中错误导入的项目。出现错误 - 不是有效的项目 ID
- batch-file - 使用批处理文件检查具有特定扩展名的文件是否在特定文件夹中
- mysql - SQL Distinct Group By Query
- c++ - c++中指针的类型是如何实现的?
- django - 如何在 Django 的 change_password 中显示错误消息
- java - RuntimeException:com.android.builder.dexing.DexArchiveMergerException:无法合并 dex
- angular - 如何将模板从一个组件传递到另一个组件
- python - 如何获取当前shell并在其中执行命令?