Проблема загрузки файла CSS в браузере мобильного сафари - PullRequest
Новая
       10

Проблема загрузки файла CSS в браузере мобильного сафари

0 голосов
/ 27 января 2019

Я создал сайт с помощью responseJs, nodeJs (экспресс-сервер).Клиенты довольны и так далее, но ... есть проблема, которая воспроизводима несколькими клиентами (я не могу воспроизвести ее).Кажется, эта проблема возникает только на устройствах iPhone (браузер Safari).После входа клиента в систему отображается пустая страница (поэтому css загружен неправильно).Сообщение об ошибке: Не удалось выполнить синтаксический анализ таблицы стилей в ..., поскольку в строгом режиме не допускаются типы MIME, не относящиеся к CSS.

Факты:

  • После обновления страницывсе в порядке, css загружается без ошибок
  • При использовании приватного режима браузера - все в порядке
  • Тип содержимого ответа - "text / css; charset ="UTF-8 "
  • Css добавляется в тег заголовка html следующим образом: 
<link href="/static/css/main.b68c3443.css" rel="stylesheet">
  • User-agent: Mozilla / 5.0 (iPhone; CPU iPhone OS 12_1_2 likeMac OS X) AppleWebKit / 605.1.15 (KHTML, как Gecko) Версия / 12.0 Mobile / 15E148 Safari / 604.1
  • Если клиент очистил кеш браузера - все в порядке несколько раз

Рабочий процесс:

  1. клиент вводит учетные данные на странице входа в систему
  2. перенаправляет на страницу загрузки (должен быть загружен файл CSS), здесь размещено приложение реакции.путь: / логин
  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-странице - очень уродливое решение ...

...