Question

我通过使用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移动版/ 15E148 Safari / 604.1
如果客户清除了浏览器缓存-几次都没事

工作流程：

客户在登录页面上输入凭据
重定向到加载页面（必须加载css文件），这是放置React应用的位置。路径：/ login
反应应用重定向到主页（页面未重新加载），路径：/ 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页面添加样式的想法非常丑陋的解决方案...

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

0 个答案: