移动 Safari 浏览器中的 CSS 文件加载问题

Question

我使用 reactJs、nodeJs（快速服务器）创建了网站。客户很高兴等等，但是......存在一些客户可以重现的问题（我无法重现）。这个问题似乎只发生在 iPhone 设备（safari 浏览器）上。客户登录系统后，会显示空白页面（因此，css 未正确加载）。错误消息： 没有在 ... 处解析样式表，因为严格模式下不允许非 CSS MIME 类型。

事实：

• 页面刷新后一切正常，css加载没有错误
• 通过使用浏览器的私有模式- 一切正常
• 响应的内容类型 - “text/css; charset=UTF-8”
• css 被添加到 html header 标签中，如下所示：

<link href="/static/css/main.b68c3443.css" rel="stylesheet">

• 用户代理: 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
• 如果客户清除浏览器缓存 - 一切正常几次

工作流程：

1. 客户在登录页面输入凭据
2. 重定向到加载页面（必须加载css文件），这里是react app。路径：/登录
3. 反应应用程序重定向到主页（页面未重新加载），路径：/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 页面的想法是非常丑陋的解决方案......