我通过使用reactJs,nodeJs(快速服务器)创建了网站。客户很高兴,依此类推,但是...存在一些客户可以复制的问题(我无法复制)。似乎仅在iPhone设备(Safari浏览器)上会出现此问题。 客户登录到系统后,将显示空白页面(因此,css无法正确加载)。错误信息: 未在...处解析样式表,因为在严格模式下不允许使用非CSS MIME类型。
事实:
<link href="/static/css/main.b68c3443.css" rel="stylesheet">
工作流程:
请求信息:
"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页面添加样式的想法非常丑陋的解决方案...