Отказался применять стиль из css MIME Type

Я использовал vite, чтобы создать приложение для реагирования с машинописным текстом, и я следую руководству, чтобы получить хорошее начало (видео). У меня есть другое приложение в angular, и оно отлично работает с этим approach Я развертываю его на kubernetes с помощью ngix, но с vite я сталкиваюсь с этой ошибкой, и я не знаю причину:

plint2dev.linguaserve.net/:16 Отказано в применении стиля из «https://plint2dev.linguaserve.net/assets/index.2518dafb.css», поскольку его тип MIME («текст/html») не является поддерживаемым типом MIME таблицы стилей. , и включена строгая проверка MIME. index.f2ba2231.js:1

Не удалось загрузить сценарий модуля: ожидался сценарий модуля JavaScript, но сервер ответил типом MIME "text/html". Строгая проверка типов MIME применяется для скриптов модулей в соответствии со спецификацией HTML.

Мой конфиг nginx и код репозитория можно пересмотреть здесь . Я перепробовал все альтернативы, предоставленные здесь, но ни одна из них не работает для меня.

Мой настоящий nginx.conf:

pid /run/nginx.pid;
worker_processes auto;
worker_rlimit_nofile 65535;

events {
        multi_accept on;
        worker_connections 65535;
}

http {
        client_max_body_size 100M;
        charset utf-8;
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        server_tokens off;

        # MIME
        include mime.types;
        default_type application/octet-stream;

        # logging
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log warn;

        # load configs
        include /etc/nginx/conf.d/*.conf;

        # linguaserve.net
        server {
                  listen 80;
                  listen [::]:80;
                  server_name .linguaserve.net;

                  set $base /usr/share/nginx/html;

                  # security headers
                  add_header X-Frame-Options "SAMEORIGIN" always;
                  add_header X-XSS-Protection "1; mode=block" always;
                  add_header X-Content-Type-Options "nosniff" always;
                  add_header Referrer-Policy "no-referrer-when-downgrade" always;
                  add_header X-Request-ID  $request_id;

                  location / {
                    try_files $uri $uri/ /index.html;
                  }

                  # . files
                  location ~ /\.(?!well-known) {
                    deny all;
                  }

                  # logging
                  access_log /var/log/nginx/access.log;
                  error_log /var/log/nginx/error.log warn;

                  # favicon.ico
                  location = /favicon.ico {
                    log_not_found off;
                    access_log off;
                  }


                  # gzip
                  gzip on;
                  gzip_vary on;
                  gzip_proxied any;
                  gzip_comp_level 6;
                  gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
        }
}

Отсюда я совсем потерялся. Любая помощь будет оценена по достоинству. Мой докерфайл

FROM nginx

## Remove default Nginx website
RUN rm -rf /usr/share/nginx/html/*

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/nginx.conf

COPY /dist/* /usr/share/nginx/html/

RUN  cd /usr/share/nginx
RUN  ln -s /usr/share/nginx/html /usr/share/nginx/www
RUN  ln -s /usr/share/nginx/html /etc/nginx/html
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Nginx не может найти ни один из файлов и вместо этого возвращает index.html.

Richard Smith 29.09.2022 12:07

И как я могу это исправить? Это связано с файлом докеров?

Aw3same 29.09.2022 12:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
273
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Наконец, я решил это. Это была глупая ошибка. В моем dockerfile я скопировал все файлы из dist, но не структуру каталогов.

Перед:

dist
│   index.12321.js
│   index.12321.css
│   index.html
│   vite.svg.     

В настоящее время:

dist  
└───assests
│   │   index.12321.js
│   │   index.12321.css
│   index.html
│   vite.svg.   

Решение было изменить эту команду

COPY /dist/* /usr/share/nginx/html/

к этому COPY /dist/ /usr/share/nginx/html/

Удаление * решило боль.

Другие вопросы по теме