Stylesheet wegen MIME-Typ nicht geladen

381

Ich arbeite an einer Website, die gulpzum Kompilieren und Synchronisieren des Browsers verwendet wird, um den Browser mit meinen Änderungen zu synchronisieren.

Die gulp-Aufgabe kompiliert alles richtig, aber auf der Website kann ich keinen Stil sehen, und die Konsole zeigt diese Fehlermeldung an:

Die Anwendung des Stils von ' http: // localhost: 3000 / assets / styles / custom-style.css ' wurde abgelehnt , da der MIME-Typ ('text / html') kein unterstützter MIME-Typ für Stylesheets ist und die strikte MIME-Prüfung aktiviert ist.

Jetzt verstehe ich nicht wirklich, warum das passiert.

Der HTML-Code enthält die folgende Datei (von der ich mir ziemlich sicher bin, dass sie korrekt ist):

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

Und das Stylesheet ist eine Mischung aus Bootstrap- und Font-fantastischen Styles (noch nichts Benutzerdefiniertes).

Der Pfad ist ebenfalls korrekt, da dies die Ordnerstruktur ist:

index.html
assets
|-styles
  |-custom-style.css

Aber ich bekomme immer wieder den Fehler.

Was könnte es sein? Ist das etwas (vielleicht eine Einstellung?) Für gulp / browserersync vielleicht?

Nick
quelle
Ich bekam dies, als mein verknüpftes Stylesheet mit einem HTML <style ... -Tag begann, anstatt nur direkt in Stilregeln zu springen. Ich habe dies auch beim Verknüpfen einer später geladenen HTML-Datei (AngularJS) erhalten, sodass ich beim Laden der Seite über JavaScript auf dynamisches Laden umgestellt habe und das Problem behoben war.
Newclique
82
Dies passiert, wenn Sie eine falsche URL für die Datei festlegen oder wenn Ihr Server nicht richtig konfiguriert ist. Im Ergebnis erhält der Browser das Stylesheet NICHT, aber HTML mit dem Status 404 und dem Header "Content-Type". Da der Browser etwas vom Server erhält, sagt er Ihnen nicht, dass es keine Antwort gibt, aber er sagt Ihnen, dass der MIME-Typ der Datei falsch ist. Der schnellste Weg, dies zu überprüfen, besteht darin, zu versuchen, die Datei direkt http://localhost:3000/assets/styles/custom-style.cssin einem neuen Tab zu öffnen .
RussCoder
6
Für mich war es der von RussCoder beschriebene Fall. Der Grund dafür war, dass ich Angular verwendet und vergessen habe, eine CSS-Datei zum Styles-Paket in der Datei angle.json hinzuzufügen. Daher wurde es beim Erstellen der App ignoriert.
Jana
1
Ich könnte dieses Problem durch Federsicherheitskonfigurationen beheben. Der Zugriff auf den Ressourcenordner wurde blockiert.
Sndu
2
Ein schlechtes proxy.conf.jsonSetup hat uns zu diesem seltsamen Fehler geführt, da die Weiterleitung der Anforderung an die Backend-API nicht ordnungsgemäß funktionierte, daher die HTML-Fehlerantwort.
Ktsangop

Antworten:

137

Überprüfen Sie für Node.js-Anwendungen Ihre Konfiguration:

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

Beachten Sie, dass /publicam Ende kein Schrägstrich vorhanden ist. Sie müssen ihn daher in Ihre href-Option Ihres HTML-Codes aufnehmen:

href="/css/style.css">

Wenn Sie einen Schrägstrich ( /public/) eingefügt haben, können Sie dies einfach tun href="css/style.css".

JPaulino
quelle
href = "/ assets / style.css"> in meinem Fall das Problem gelöst!
Sergio Guerjik
127

Ich denke, das Problem war eine CSS-Bibliothek, die mit Kommentaren begann.

Während der Entwicklung minimiere ich keine Dateien und entferne keine Kommentare. Dies bedeutete, dass das Stylesheet mit einigen Kommentaren begann, was dazu führte, dass es als etwas anderes als CSS angesehen wurde.

Durch Entfernen der Bibliothek und Einfügen in eine Herstellerdatei (die IMMER ohne Kommentare minimiert wird) wurde das Problem behoben.

Auch hier bin ich mir nicht 100% sicher, ob dies eine Lösung ist, aber es ist immer noch ein Gewinn für mich, da es jetzt wie erwartet funktioniert.

Nick
quelle
4
Eine halbe Lösung, denn was sollten Sie tun, wenn Sie nicht all diese CSS in den Anbieter stellen möchten? Node_modules jedes Mal minimieren, wenn Sie Ihre App testen? Doh ... Haben Sie etwas gefunden, um nur ein bestimmtes Modul zu kompilieren?
SteamFire
1
Während meines Kompilierungsprozesses wird die Herstellerdatei nur beim Erstellen erstellt, und dann achte ich nur auf Änderungen an den Dateien, an denen ich gerade arbeite (was normalerweise nichts ist, was in den Hersteller geht). Dies bedeutet, dass der erste Build etwas langsamer ist, aber dann kompiliere ich einfach meine Dateien ohne Minimierung, was den Prozess für mich nicht verlangsamt
Nick
3
Ich bin auf dasselbe Problem gestoßen und habe festgestellt, dass ich versucht habe, eine minimierte Version der Datei, die auf dem Server vorhanden war, als nicht minimierte Datei zu laden. Also habe ich versucht, "custom-style.min.css" zu laden, als die Datei auf dem Server "custom-style.css" war. Nachdem ich meinen Link geändert hatte, um die richtige Ressource zu laden, funktionierte alles einwandfrei.
Programmierer Dan
Das Problem ist nicht auf CSS beschränkt. Ich habe auch eine 404 für eine JS-Datei erhalten, die durch einen Kommentar in der ersten Zeile verursacht wurde.
Schwarzer
80

Dieser Fehler kann auch auftreten, wenn Sie nicht ordnungsgemäß auf Ihre CSS-Datei verweisen.

Zum Beispiel, wenn Ihr Link-Tag ist

<link rel="stylesheet" href="styles.css">

Wenn Ihre CSS-Datei jedoch den Namen style.css(ohne das zweite s) trägt, besteht eine gute Chance, dass dieser Fehler angezeigt wird.

John Deverall
quelle
4
Genau das, was mir passiert ist. Ich habe hier jede Antwort ausprobiert (Mimetyp ändern, CSS-Kommentare entfernen, Konfiguration von node.js ändern ...). Ich musste lediglich einen Tippfehler im CSS-Namen beheben. Doh!
AJPerez
5
Um diese Antwort zu ergänzen, stellen Sie sicher, dass gulp die CSS-Datei tatsächlich gefunden und in Ihre dist weitergeleitet hat. Immer wenn ich diesen Fehler erhalte, habe ich meinen Pfad zu den CSS-Dateien irgendwie durcheinander gebracht und er existiert einfach nicht im Build-Verzeichnis.
LAdams87
5
Ja, das gleiche für mich, ein einfacher und dummer Tippfehler. Ich denke, was es macht, dass der Server eine 404-Antwortseite sendet, so dass Ihr Browser diese 404-Seite erhält und Ihnen sagt, dass es nicht richtig CSS ist ... was wahr ist.
Tanou
62

In den meisten Fällen kann dies einfach daran liegen, dass der CSS-Dateipfad falsch ist . Der Webserver kehrt also status: 404mit einer Not FoundInhaltsnutzlast vom htmlTyp zurück.

Der Browser folgt diesem (falschen) Pfad vom <link rel="stylesheet" ...>Tag mit der Absicht, CSS-Stile anzuwenden. Der zurückgegebene Inhaltstyp widerspricht jedoch, sodass ein Fehler protokolliert wird.

Geben Sie hier die Bildbeschreibung ein

Tharaka
quelle
Mein Problem war, dass der Pfad ungültig war. Dieser schlechte Pfad wurde jedoch dadurch verursacht, dass die Basis-HREF-Einstellung für mein Winkelprojekt falsch war. Wenn jemand anderes diesen Fehler nach dem Aktualisieren Ihrer Basis-HREF sieht, kann dies die Ursache sein.
Krejko
1
Vielen Dank, dass Sie sich die Mühe gemacht haben, vollständig und klar zu dokumentieren, wie ein 404-Fehler in der CSS-Datei diese (anfänglich) rätselhafte Fehlermeldung erzeugen kann
Velojet
1
Eine andere Möglichkeit zur Fehlerbehebung: Fügen Sie die URL, auf der dieser Fehler auftritt, in eine andere Registerkarte ein. Wenn Sie kein CSS sehen, ist dies wahrscheinlich das Problem
BlackICE
Vielen Dank für Ihren Hinweis
Jason Zhou
52

Erstellen Sie einen Ordner direkt unter / über der Datei style.css gemäß der Angular-Struktur und geben Sie einen Link wie an <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Geben Sie hier die Bildbeschreibung ein

Gopi GA
quelle
23
Warum funktioniert das? Der Fehler besagt, dass "text / html" kein unterstützter MIME-Typ ist.
James Bateson
6
In meinem Fall ist der Fehler behoben, die CSS-Stile werden jedoch nicht angewendet ..: /
Andru
2
Ich habe ein bisschen mehr Zeit damit verbracht, über dieses Problem zu lesen und den Typ einer CSS-Datei zu ändern, bis etwas anderes schwerwiegende Probleme verursachen kann, wie das Lesen von CSS als HTML vom Server
Nick
In AngularDart ist das Stammverzeichnis für index.html der Ordner 'web' und nicht der Hauptordner des Projekts. Alle CSS-Dateien müssen sich also im Webordner befinden. So "[Projektordner] \ web [yourcssfileshere]". Wenn Sie also versuchen, eine CSS-Datei zu importieren, die sich außerhalb des Webordners befindet, wird sie nicht gefunden.
Wael
40

Ich hatte diesen Fehler für eine Bootstrap-Vorlage.

<link href="starter-template.css" rel="stylesheet">

Dann habe ich das rel="stylesheet"aus dem Link entfernt, dh:

<link href="starter-template.css">

Und alles funktioniert gut. Versuchen Sie dies, wenn Sie Bootstrap-Vorlagen verwenden.

Amandeep Saini
quelle
3
Guter Fang. Fehler ist jetzt weg.
Rich
1
Gemäß dem Lebensstandard (4.2.4) muss "ein Verknüpfungselement entweder ein rel-Attribut oder ein itemprop-Attribut haben, aber nicht beide." Durch das Entfernen des relAttributs wird lediglich die Funktionalität zum Einfügen eines Stylesheets entfernt.
Artjom B.
das hat seltsamerweise für mich funktioniert.
34

Ich habe meine 'href' -> 'src' geändert. Also daraus:

<link rel="stylesheet" href="dist/photoswipe.css">

dazu:

<link rel="stylesheet" src="dist/photoswipe.css">

Es funktionierte. Ich weiß nicht warum, aber es hat den Job gemacht.

Sebastian Voráč
quelle
1
Obwohl es auch bei mir funktioniert hat, ist dies ein gültiges Attribut?
sr9yar
1
@ sr9yar Sie haben Recht , dass die nach validator.w3.org es nicht gültig src in Verbindung zu haben, so ist es gut als schnelle Hotfix ist, aber sobald man etwas mehr Zeit haben , würde ich vorschlagen , eine andere um mehr zu erfahren gültige Problemumgehung.
Sebastian Voráč
20

Kommentare in Ihrer Datei lösen dies aus. Einige Minifier entfernen keine Kommentare.

EBENFALLS

Wenn Sie Node.js verwenden und Ihre statischen Dateien expresswie folgt festlegen :

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

Sie müssen die Dateien richtig adressieren.

In meinem Fall waren beide das Problem, daher habe ich meinen CSS-Links "/css/styles.css" vorangestellt.

Beispiel:

<link type="text/css" rel="stylesheet" href='/css/styles.css">

Diese Lösung ist perfekt, da der Pfad das Hauptproblem ist, wenn CSS nicht gerendert wird

metal_jacke1
quelle
18

Ich habe einfach auf die CSS-Datei (in meinem Fall ein Angular-Thema) im Abschnitt " Stile " meiner Angular 6-Build-Konfiguration in angular.json verwiesen:

Geben Sie hier die Bildbeschreibung ein

Dies beantwortet die Frage nicht, aber es könnte eine geeignete Problemumgehung sein, wie es für mich war.

dvlsc
quelle
3
Das ist die richtige Antwort für Angular-CLI 6-Projekte
Torsten Barthel
14

Wie in diesem Beitrag erwähnt, haben einige der Lösungen für mich funktioniert, aber CSS gilt nicht für die Seite.

Ich habe einfach das Verzeichnis "css" in das Verzeichnis "Assest /" verschoben und alles funktioniert einwandfrei.

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
Jitendra G2
quelle
Awesome (Y) hat mein Problem behoben
Chakri
12

Überprüfen Sie diese Antwort auch für andere Benutzer, die Angular-CLI verwenden und in einem Unterordner auf dem Webserver veröffentlichen:

Wenn Sie auf einem Nicht-Root-Pfad innerhalb einer Domäne bereitstellen, müssen Sie das <base href="https://stackoverflow.com/">Tag in Ihrer Domäne manuell aktualisierendist/index.html.

In diesem Fall müssen Sie auf aktualisieren <base href="https://stackoverflow.com/sub-folder/">

https://github.com/angular/angular-cli/issues/1080

Simonberry
quelle
10

Mein Problem ist, dass ich Webpack verwendet habe und in meinem HTML-CSS-Link einen relativen Pfad hatte. Jedes Mal, wenn ich zu einer verschachtelten Seite navigierte, wurde der falsche Pfad aufgelöst:

<link rel="stylesheet" href='./index.css'>

Die einfache Lösung bestand also darin, die zu entfernen, .da es sich bei meiner um eine einseitige Anwendung handelt .

So was:

<link rel="stylesheet" href='/index.css'>

so löst es sich immer auf /index.css

Jared
quelle
Ja, in meinem Fall habe ich vergessen, diese relativen Pfade aus meiner index.html-Datei zu entfernen, und habe das Webpack im Produktionsmodus ausgeführt. Diese Pfade werden nicht benötigt, da das Webpack die CSS-Dateien dynamisch über die Datei webpack.prod.js verknüpft.
Kewal Shah
10

Ich hatte dieses Problem mit einer Site, von der ich wusste, dass sie online funktioniert, als ich sie auf localhost und PhpStorm verschob.

Das hat online gut funktioniert:

    <link rel="stylesheet" href="/css/additional.css">

Aber für localhost musste ich den Schrägstrich loswerden:

    <link rel="stylesheet" href="css/additional.css">

Daher bekräftige ich bereits einige Antworten, die hier bereits gegeben wurden - es handelt sich wahrscheinlich eher um einen Pfad- oder Rechtschreibfehler als um ein kompliziertes Server-Setup-Problem. Der Fehler in der Konsole ist ein roter Hering; Die Registerkarte Netzwerk muss zuerst auf den 404 überprüft werden.

Unter den hier gegebenen Antworten finden Sie einige Lösungen, die nicht korrekt sind. Das Hinzufügen type="text/html"oder Ändern hrefvonsrc ist nicht die Antwort.

Wenn Sie alle Attribute haben möchten, damit sie auf den wählerischsten Validatoren und Ihrer IDE validiert werden, sollte der Medienwert angegeben werden und der relsollte sein stylesheet, z. B.:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
Henrys Katze
quelle
9

Ich weiß, dass der Kontext möglicherweise nicht stimmt, aber das Verknüpfen einer nicht vorhandenen Datei kann dieses Problem verursachen, wie es mir zuvor passiert ist.

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

Wenn diese Datei nicht vorhanden ist, tritt dieses Problem auf.

Safwat Fathi
quelle
8

Ich hatte das gleiche Problem.

Wenn die Struktur Ihres Projekts dem folgenden Baum entspricht:

index.html
assets
|-styles
  |-custom-style.css
server
  |- server.js

Ich empfehle, den folgenden Code hinzuzufügen server.js:

var path = require('path')
var express = require('express')
var app = express()

app.use('/assets', express.static(path.join(__dirname, "../assets")));

Hinweis: Path ist ein integriertes Node.js-Modul, sodass dieses Paket nicht über npm installiert werden muss.

Mostafa Ghadimi
quelle
7

Neben einer langen Liste von Antworten ist mir dieses Problem auch passiert, weil ich nicht wusste, dass der Pfad aus Sicht der Browsersynchronisierung falsch war.

Angesichts dieser einfachen Ordnerstruktur:

package.json
app
  |-index.html
  |-styles
      |-style.css

Das hrefAttribut <link>in index.htmlmuss sein app/styles/style.cssund nichtstyles/style.css

Stig Perez
quelle
In der Tat gab mir nur ein Tippfehler im Pfad den gleichen Fehler.
Julesezaar
Wow, das hat bei mir funktioniert, vielen Dank. Ich wollte buchstäblich aufgeben
Vash
7

Sie können die Google Chrome-Tools öffnen, die Registerkarte "Netzwerk" auswählen, Ihre Seite neu laden, die Dateianforderung des CSS suchen und nach dem Inhalt der Datei suchen.

Vielleicht haben Sie etwas falsch gemacht, als Sie die beiden Bibliotheken in Ihrer Datei zusammengeführt haben, einschließlich einiger Zeichen oder Überschriften, die für CSS nicht richtig sind?

Yunior González Santana
quelle
1
Leider habe ich es versucht, aber es hilft nicht wirklich, die Anfrage schlägt sofort fehl und es hat nur die Anfrage-URL (die korrekt ist)
Nick
6

Wenn Sie Express ohne JS verwenden, versuchen Sie Folgendes:

app.use(express.static('public'));

Als Beispiel befindet sich meine CSS-Datei bei public/stylesheets/app.css

Tal Hakmon
quelle
5

Verwenden Sie für eine Node.js-Anwendung dies einfach, nachdem Sie alle erforderlichen Module in Ihre Serverdatei importiert haben:

app.use(express.static("."));
  • Die in Express.static integrierte Middleware-Funktion in Express und dies in Ihrer HTML-Datei: <link rel="stylesheet" href="style.css">
Purav Barot
quelle
3
Sie möchten Ihren Servercode nicht wirklich der Öffentlichkeit zur Verfügung stellen, oder?
Ki Jéy
5

Ich habe das gleiche Problem bekommen und dann überprüft, ob ich geschrieben habe:

<base href="./"> in index.html

Dann wechselte ich zu

<base href="/">

Und dann hat es gut funktioniert.

VIKAS KOHLI
quelle
4

Entfernen Sie rel = "Stylesheet" und fügen Sie type = "text / html" hinzu. So wird es aussehen -

<link  href="styles.css" type="text/html" />
Sanjay Choubey
quelle
Endlich eine Antwort, die für mich funktioniert hat. Vielen Dank!
Richard Witherspoon
4

In meinem Fall hatte ich das Paket, als ich es live bereitstellte, aus dem öffentlichen HTML-Ordner. Es hatte einen Grund.

Aber anscheinend wurde eine strenge MIME-Typprüfung aktiviert, und ich bin mir nicht sicher, ob sie auf meiner Seite oder von der Firma ist, bei der ich hoste.

Sobald ich den Styling-Ordner in dasselbe Verzeichnis wie die Datei index.php verschoben habe, wurde der Fehler nicht mehr angezeigt, und das Styling wurde perfekt aktiviert.

Jabulani
quelle
4

Bootstrap-Stile werden nicht geladen # 3411

https://github.com/angular/angular-cli/issues/3411

  1. Ich habe Bootstrap v. 3.3.7 installiert

    npm install bootstrap --save
  2. Dann habe ich die benötigten Skriptdateien apps[0].scriptsin die Datei angle-cli.json eingefügt:

    "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],
    
    // And the Bootstrap CSS to the apps[0].styles array
    
    "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
  3. Ich habe ng serv neu gestartet

Es hat bei mir funktioniert.

HSN KH
quelle
4

Wenn der Browser die zugehörige CSS-Datei nicht finden kann, kann dies zu einem Fehler führen.

Wenn Sie die Angular-Anwendung verwenden, müssen Sie den CSS-Dateipfad nicht in index.html einfügen

 <link href="xxx.css" rel="stylesheet"> -->

Sie können den zugehörigen CSS-Dateipfad in die Datei styles.css einfügen.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
Ahmet Arslan
quelle
Dies war das Update für mich, entfernen Sie den Link href aus index.html und verwenden Sie die Importmethode in der Datei styles.scss.
IronWorkshop
3

Einer der Hauptgründe für das Problem ist, dass die zu ladende CSS-Datei keine gültige CSS-Datei ist.

Ursachen:

  • Ungültiger MIME-Typ
  • JavaScript-Code im Stylesheet enthalten - (kann aufgrund einer falschen Konfiguration des Webpack-Bundlers auftreten)

Überprüfen Sie, ob die Datei, die Sie laden möchten, ein gültiges CSS-Stylesheet ist (rufen Sie die Server-URL der Datei auf der Registerkarte "Netzwerk" ab, klicken Sie auf eine neue Registerkarte und überprüfen Sie sie).

Nützliche Informationen zur Berücksichtigung bei der Verwendung von <link> innerhalb des Body-Tags.

Ein linkTag im Körper zu haben, ist jedoch nicht die Standardmethode für die Verwendung des Tags. Wir können es jedoch zur Seitenoptimierung verwenden (weitere Informationen: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) ) / wenn der Geschäftsanwendungsfall dies erfordert (wenn Sie den Inhalt und den Server konfigurieren, für die konfiguriert ist müssen die HTML-Seite mit dem bereitgestellten Inhalt rendern).

Während wir im Body-Tag bleiben, müssen wir das Attribut wie folgt itemPropertyin das linkTag einfügen

<body>
    <!--  -->
      <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
    <!--  -->
</body>`

Für weitere Informationen über itemPropertyeinen Blick in /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

BALA
quelle
3

Wenn Sie in die Browserkonsole> network> style.css ... klicken und darauf klicken, dass "/ path / to / my / CSS nicht abgerufen werden kann", wurde mir mitgeteilt, dass mein Link falsch war. Ich habe das in den Pfad meiner CSS-Datei geändert.

Der ursprüngliche Pfad vor der Änderung war localhost: 3000 / Example / public / style.css. Durch Ändern in localhost: 3000 / style.css wurde das Problem behoben.

wenn Sie die Datei von app.use aus bereitstellen (express.static (path.join (__ dirname, "public"))); oder app.use (express.static ("public")); Ihr Server würde "diesen Ordner" an den Browser übergeben, sodass das Hinzufügen eines Links "/yourCssName.css" in Ihrem Browser das Problem löst

Wenn Sie dem CSS-Link Ihres Browsers andere Routen hinzufügen, weisen Sie den Browser an, in der angegebenen Route nach dem CSS zu suchen.

Zusammenfassend ... Überprüfen Sie, wohin der CSS-Link Ihres Browsers zeigt.

Bahri Noredine
quelle
2

Wenn Sie Stile in JavaScript wie folgt festlegen:

    var cssLink = document.createElement("link");
    cssLink.href = "./content.component.scss";
    cssLink.rel = "stylesheet";
   --> cssLink.type = "html/css";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

Dann ändern Sie einfach cssLint.type (in der obigen Beschreibung durch einen Pfeil gekennzeichnet) in "MIME":

   cssLink.type = "MIME";

Es wird Ihnen helfen, den Fehler zu beseitigen.

Shriram
quelle
2

Dieses Problem tritt auf, wenn Sie das CLI-Tool entweder für Reactjs oder für Angular verwenden. Der Schlüssel besteht also darin, den gesamten endgültigen Build dieser Tools zu kopieren, da diese ihre eigenen Lite-Server initialisieren, wodurch Ihre URLs mit dem von Ihnen erstellten Back-End-Server verwechselt werden ... nehmen Sie den gesamten Build-Ordner und speichern Sie ihn im Asset-Ordner Ihres Back-End-Server-Projekts und verweisen Sie ihn von Ihrem Back-End-Server und nicht von dem Server, der mit Angular oder Reactjs geliefert wird. Andernfalls verwenden Sie ihn als Front-End von einem bestimmten API-Server

ndoty
quelle
2

Ich bin auf dieses Problem gestoßen, bei dem das gleiche Problem beim Hinzufügen eines benutzerdefinierten Erscheinungsbilds zu einem Azure B2C-Benutzerfluss aufgetreten ist. Was ich fand, war, dass der Stamm, auf den sich die HTML-Seite bezog, eher ../oauth/v2 (dh der oauth-Serverpfad) als der Pfad zu meinem Speicher-Bob war.

Das Einfügen der vollständigen URL der Seiten hat das Problem für mich behoben.

Liam
quelle
2

Überprüfen Sie, ob Sie eine Komprimierung aktiviert oder deaktiviert haben. Wenn Sie es verwenden oder jemand es aktiviert hat, dannapp.use(express.static(xxx)) , hilft nicht. Stellen Sie sicher, dass Ihr Server die Komprimierung zulässt.

Ich sah den ähnlichen Fehler, als ich meinem Webpack Brotli- und Komprimierungs-Plugins hinzufügte. Dann muss Ihr Server auch diese Art der Inhaltskomprimierung unterstützen.

Wenn Sie Express verwenden, sollte Folgendes helfen:

app.use(url, expressStaticGzip(dir, gzipOptions)

Das Modul heißt: express-static-gzip

Meine Einstellungen sind:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}
Greg Woz
quelle