Zasób zablokowany z powodu niezgodności typu MIME (X-Content-Type-Options: nosniff)

Tworzę stronę internetową przy użyciu JavaScript i HTML, wszystko działało dobrze, gdy otrzymałem tę listę błędów z mojej strony HTML:

The resource from “https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Te błędy pojawiły się po automatycznej aktualizacji przeglądarki (Mozilla Firefox), być może coś zostało zmienione w konfiguracji. Czy znasz jakiś sposób na rozwiązanie tego problemu?

Sprawdź, czy ścieżka pliku jest poprawna i plik istnieje - w moim przypadku to był problem - jak to naprawiłem, błąd zniknął

Można to naprawić, zmieniając adres URL, na przykład zły:

https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8

Przykład dobry:

https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8

rawgit.com to usługa buforowania proxy dla github. Możesz tam również przejść i interaktywnie uzyskać odpowiedni adres URL dla oryginalnego adresu URL raw.githubusercontent.com . Zobacz jego FAQ

Zaczęliśmy napotykać ten błąd w środowisku produkcyjnym po tym, jak nasz zespół devops zmienił konfigurację serwera internetowego, dodając X-Content-Type-Options: nosniff. Teraz z tego powodu przeglądarka została zmuszona do interpretacji zasobów tak, jak zostało to wymienione w content-typeparametrze nagłówków odpowiedzi.

Od samego początku nasz serwer aplikacji jawnie ustawiał typ zawartości plików js na text/plain. Ponieważ X-Content-Type-Options: nosniffnie został ustawiony na serwerze internetowym, przeglądarka automatycznie interpretowała pliki js jako pliki JavaScript, chociaż typ zawartości został wymieniony jako tekst / zwykły. Nazywa się to wykrywaniem MIME. Teraz, po ustawieniu opcji X-Content-Type-Options: nosniff, przeglądarka została zmuszona do rezygnacji z wykrywania MIME i pobrania typu zawartości wymienionego w nagłówkach odpowiedzi. Z tego powodu zinterpretował pliki js jako zwykłe pliki tekstowe i odmówił ich wykonania lub zablokował. To samo widać w twoich błędach.

Rozwiązanie: polega na ustawieniu na serwerze content-typeplików JS jako

application/javascript;charset=utf-8

W ten sposób załaduje wszystkie pliki JS normalnie i problem zostanie rozwiązany.

sprawdź swoją ścieżkę, ten błąd pojawi się, jeśli plik nie istnieje w podanej ścieżce.

Czy używasz ekspresu?

Sprawdź swoją ścieżkę (zwróć uwagę na „ /” po / public /):

app.use(express.static(__dirname + "/public/"));

// uwaga: nie potrzebujesz znaku „/” przed „css”, ponieważ jest już uwzględniony powyżej:

rel="stylesheet" href="css/style.css

Mam nadzieję że to pomoże

Dla Wordpress

W moim przypadku właśnie przegapiłem ukośnik „/” po get_template_directory_uri (), więc wynikowa / wygenerowana ścieżka była nieprawidłowa:

Mój zły kod:

wp_enqueue_script( 'retina-js', get_template_directory_uri().'js/retina.min.js' ); 

Mój poprawiony kod:

wp_enqueue_script( 'retina-js', get_template_directory_uri().'/js/retina.min.js' );

Może to być spowodowane tym, że przeglądarka nie może uzyskać dostępu do pliku. Na tego typu błąd natknąłem się podczas tworzenia aplikacji z node.js. Możesz spróbować bezpośrednio zażądać pliku skryptu (kopiowanie i wklejanie adresu URL) i sprawdzić, czy możesz go odzyskać. Możesz wtedy zobaczyć, jaki jest prawdziwy problem. Może to być spowodowane uprawnieniami folderu, w którym znajduje się plik, lub przeglądarka po prostu nie może go znaleźć z powodu nieprawidłowej ścieżki do niego. W node.js po określeniu trasy do pliku wszystko działa.

To może być zła ścieżka. Upewnij się, że w głównym pliku aplikacji masz:

app.use(express.static(path.join(__dirname,"public")));

Przykładowy link do twojego css jako:

<link href="/css/clean-blog.min.css" rel="stylesheet">

podobne do linków do plików js:

<script src="/js/clean-blog.min.js"></script>

Rozwiązałem ten problem, zmieniając zestaw znaków w plikach js z UTF-8 bez BOM na prosty UTF-8 w Notepad ++

Wystąpił ten błąd, gdy korzystałem z magazynu Azure jako statycznej witryny sieci Web, skopiowane pliki js miały typ zawartości as text/plain; charset=utf-8i zmieniłem typ zawartości naapplication/javascript

Zaczęło działać.

Zobacz protokoły HTTPS i HTTP

Czasami, jeśli używasz mieszanych protokołów [zdarza się to głównie w przypadku wywołań zwrotnych JSONP], możesz skończyć na tym BŁĘDZIE.

Upewnij się, że zarówno strona internetowa, jak i strona zasobów mają te same protokoły HTTP.

napotykam ten sam problem na serwerze django, więc zmieniłem DEBUG = True w pliku settings.py, aby działał

Zdarzyło mi się to przez niewłaściwy tag. Przez pomyłkę dodaję plik js w linktagu.

Przykład: (Niewłaściwy)

<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.js">

Rozwiązano go przy użyciu prawidłowego tagu dla javascript. Przykład:

<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

Serwis https://cdn.rawgit.com jest zamykany. W ten sposób można użyć jednej z alternatywnych opcji. JSDeliver to darmowy CDN, którego można używać.

// załaduj dowolne wydanie, zatwierdzenie lub gałąź GitHub

// uwaga: zalecamy używanie npm do projektów, które go obsługują

https://cdn.jsdelivr.net/gh/user/repo@version/file

// załaduj jQuery v3.2.1

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

// użyj zakresu wersji zamiast konkretnej wersji

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// całkowicie pomiń wersję, aby uzyskać najnowszą

// NIE powinieneś używać tego w produkcji

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// dodaj „.min” do dowolnego pliku JS / CSS, aby uzyskać zminimalizowaną wersję

// jeśli taki nie istnieje, wygenerujemy go dla Ciebie

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// dodaj / na końcu, aby uzyskać listę katalogów

https://cdn.jsdelivr.net/gh/jquery/jquery/

ref - https://www.jsdelivr.com/?docs=gh