Risorsa interpretata come foglio di stile ma trasferita con tipo MIME text / html (sembra non correlata al web server)

Ho questo problema Chrome continua a restituire questo errore

Risorsa interpretata come foglio di stile ma trasferita con testo / html di tipo MIME

I file interessati da questo errore sono solo lo stile, scelto e jquery-gentleselect (altri file CSS importati nell'indice nello stesso modo funzionano bene e senza errori). Ho già verificato il mio tipo MIME e text / css è già su CSS.

Sinceramente vorrei iniziare capendo il problema (una cosa che sembra non poter fare da solo).

Vorrei iniziare capendo il problema

I browser inviano richieste HTTP ai server. Il server quindi invia una risposta HTTP.

Sia le richieste che le risposte sono costituite da un gruppo di intestazioni e da un corpo (a volte facoltativo) con alcuni contenuti.

Se esiste un corpo, una delle intestazioni è quella Content-Typeche descrive cos'è il corpo (è un documento HTML? Un'immagine? Il contenuto di un modulo inviato? Ecc.).

Quando chiedi il tuo foglio di stile, il tuo server comunica al browser che si tratta di un documento HTML ( Content-Type: text/html) anziché di un foglio di stile ( Content-Type: text/css).

Ho già controllato il mio myme.type e text / css è già su css.

Quindi qualcos'altro sul tuo server sta facendo in modo che il foglio di stile arrivi con il tipo di contenuto sbagliato.

Utilizzare la scheda Rete degli strumenti di sviluppo del browser per esaminare la richiesta e la risposta.

Usando angolare?

Questo è un avvertimento molto importante da ricordare.

Il tag di base deve essere non solo nella testa ma nella giusta posizione.

Ho avuto il mio tag di base nella posizione sbagliata nella testa, dovrebbe venire prima di qualsiasi tag con richieste url. Fondamentalmente posizionandolo come il secondo tag sotto il titolo lo ha risolto per me.

<base href="/">

Ho scritto un post su questo qui

Ho anche avuto problemi con questo errore e ho trovato una soluzione. Questo non spiega perché l'errore si è verificato, ma sembra risolverlo in alcuni casi.

Includi una barra / prima del percorso del file CSS, in questo modo:

<link rel="stylesheet" href="https://stackoverflow.com/css/bootstrap.min.css">

Il mio problema è stato più semplice di tutte le risposte in questo post.

Ho dovuto configurare IIS per includere contenuto statico.

Prova questo <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

dove si ##trova la cartella in cui si trova il file .CSS

Non dimenticare di: ..(punti doppi).

L'impostazione delle credenziali di autenticazione anonima su Identità pool di applicazioni ha funzionato per me.

Stavo anche affrontando lo stesso problema. E dopo aver fatto un po 'di ricerca e sviluppo, ho scoperto che il problema era con il nome del file. Il nome del file effettivo era "lightgallery.css" ma durante il collegamento ho digitato "lightGallery.css" .

Ulteriori informazioni:

Funzionava bene sul mio localhost (SO: Windows 8.1 e Server: Apache). Ma quando ho caricato la mia applicazione su un server remoto (diverso sistema operativo e server Web rispetto al mio localhost) non ha funzionato, dandomi lo stesso errore del tuo.

Quindi, il problema era la distinzione tra maiuscole e minuscole (rispetto ai nomi dei file) del server.

Sulla base delle altre risposte sembra che questo messaggio abbia molte cause, ho pensato di condividere la mia soluzione individuale nel caso in cui qualcuno avesse il mio esatto problema in futuro.

Il nostro sito carica i file CSS da una distribuzione AWS Cloudfront, che utilizza un bucket S3 come origine. Questo particolare bucket S3 è stato sincronizzato con un server Linux con Jenkins. Il synccomando via s3cmdimposta Content-Type per l'oggetto S3 automaticamente in base a ciò che dice il sistema operativo (presumibilmente basato sull'estensione del file). Per qualche motivo, nel nostro server, tutti i tipi venivano impostati correttamente tranne i .cssfile, che forniva il tipo text/plain. In S3, quando controlli i metadati nelle proprietà di un file, puoi impostare il tipo come preferisci. Impostandolo per text/cssconsentire al nostro sito di interpretare correttamente i file come CSS e caricarli correttamente.

Nel caso in cui serviate CSS statici con nginx dovreste aggiungere

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

o

location ~ \.css{
    default_type text/css;
}
location ~ \.js{
    default_type application/x-javascript;
}

a nginx conf

La risposta di @Rob Sedgwick mi ha dato un puntatore, tuttavia, nel mio caso la mia app era un'applicazione Spring Boot . Quindi ho appena aggiunto esclusioni nella mia configurazione di sicurezza per i percorsi dei file interessati ...

NOTA - Questa soluzione è basata su SpringBoot ... Ciò che potrebbe essere necessario fare potrebbe differire in base al linguaggio di programmazione che si sta utilizzando e / o al framework che si sta utilizzando

Tuttavia, il punto da notare è;

In sostanza, il problema può essere causato quando vengono autenticate tutte le richieste, comprese quelle per il contenuto statico.

Diciamo quindi che alcuni percorsi del mio contenuto statico che hanno causato gli errori sono i seguenti;

Un percorso chiamato "plugin"

http: // localhost: 8080 / plugins / stili / css / file-1.css

http: // localhost: 8080 / plugins / stili / css / file-2.css

http: // localhost: 8080 / plugins / js / script-file.js

E un percorso chiamato "pagine"

http: // localhost: 8080 / pages / stili / css / style-1.css

http: // localhost: 8080 / pages / stili / css / style-2.css

http: // localhost: 8080 / pages / js / scripts.js

Quindi aggiungo solo le esclusioni come segue nella mia Spring Security Security Config;

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers(<comma separated list of other permitted paths>, "/plugins/**", "/pages/**").permitAll()
            // other antMatchers can follow here
    }

}

Saluti!

Usando angolare

Nel mio caso usare ng-hrefinvece di hrefrisolverlo per me.

Nota :

Sto lavorando con Laravel come back-end

stavo affrontando la stessa cosa, con una specie dello stesso file .htaccess per creare URL belli. dopo alcune ore di guardarsi intorno e sperimentare. ho scoperto che l'errore era dovuto al collegamento di file relativamente.

il browser inizierà a recuperare lo stesso file html di origine per tutti i file css, js e image, quando vorrei sfogliare alcuni passaggi in profondità nel server.

per contrastare ciò puoi usare il <base>tag sulla tua fonte html,

<base href="http://localhost/assets/">

e link a file come,

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/script.js"></script>

o usa collegamenti assoluti per tutti i tuoi file.

<link rel="stylesheet" type="text/css" href="http://localhost/assets/css/style.css" />
<script src="http://localhost/assets/js/script.js"></script>
<img src="http://localhost/assets/images/logo.png" />

Se si utilizza JSP, questo problema può derivare dalla mappatura del servlet. se la tua mappatura prende url da defaut in questo modo:

@WebServlet("/")

quindi il contenitore interpreta il tuo URL CSS e va al servlet invece di andare al file CSS.

ho avuto lo stesso problema, ho cambiato la mia mappatura e ora tutto funziona

Ho un problema simile in MVC4 utilizzando l'autenticazione basata su moduli. Il problema era questa riga nel web.config,

<modules runAllManagedModulesForAllRequests="true">

Ciò significa che ogni richiesta, comprese quelle relative al contenuto statico, viene autenticata.

Cambia questa riga in:

<modules runAllManagedModulesForAllRequests="false">

Anche di recente ho riscontrato questo problema su Chrome . Fornisco solo il percorso assoluto per la risoluzione dei problemi del mio file CSS.

<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />

Voglio ampliare il punto di Todd R nel PO. Nelle pagine asp.net, ilweb.config file definisce le autorizzazioni necessarie per accedere a ciascun file o cartella nell'applicazione. Nel nostro caso, la cartella dei file CSS non consentiva l'accesso agli utenti non autorizzati, causando un errore nella pagina di accesso prima che l'utente fosse autorizzato. La modifica delle autorizzazioni richieste in web.configutenti non autorizzati ha potuto accedere ai file CSS e risolto questo problema.

Nel caso in cui qualcuno venga a questo post e abbia un problema simile. Ho appena avuto un problema simile, ma la soluzione era abbastanza semplice.

Uno sviluppatore aveva erroneamente lasciato cadere una copia di web.config nella directory CSS. Una volta eliminati, tutti gli errori sono stati risolti e la pagina visualizzata correttamente.

Mi sono imbattuto nello stesso problema mentre riprendevo a lavorare su un vecchio progetto stack MEAN. Stavo usando nodemoncome mio server di sviluppo locale e ho avuto lo stesso errore Resource interpreted as stylesheet but transferred with MIME type text/html. Sono passato dal nodemonal http-serverquale si può trovare qui . Ha funzionato immediatamente per me.

È perché è necessario aver impostato il tipo di contenuto come text / html anziché text / css per la pagina del server (php, node.js ecc.)

Ciò si è verificato quando ho rimosso il protocollo dal collegamento CSS per un foglio di stile CSS servito da un CDN di Google.

Questo non dà alcun errore:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">

Ma questo dà l'errore Risorsa interpretata come foglio di stile ma trasferita con il tipo MIME text / html :

<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">

Stavo affrontando un problema simile. Ed esplorare le soluzioni in questa fantastica pagina Stack Overflow.

La risposta di user54861 ​​(mancata corrispondenza dei nomi in maiuscole e minuscole) mi incuriosisce nel controllare nuovamente il mio codice e mi sono reso conto che " Non ho caricato due file js che li ho caricati nel tag head ". :-)

Quando li ho caricati il ​​problema scappa! E il codice viene eseguito e la pagina viene visualizzata senza alcun altro errore!

Quindi, morale della storia è non dimenticare di assicurarsi che tutti i tuoi file js siano caricati dove la pagina li sta cercando.

Mi sono imbattuto nello stesso problema con un'applicazione .NET, un open source CMS chiamato MojoPortal. In uno dei miei temi e skin per un determinato sito, durante la navigazione o il test si macinerebbe e rallenterebbe come se stesse soffocando.

Il mio problema non riguardava l'attributo "tipo" per il CSS ma era "quell'altra cosa". Il mio esatto cambiamento è stato nel Web.Config . Ho modificato tutti i valori in FALSE per MinifyCSS, CacheCssOnserver e CacheCSSinBrowser.

Una volta impostato, il sito Web era di nuovo veloce nella produzione.

Ho avuto lo stesso errore perché ho dimenticato di inviare prima un'intestazione corretta

header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';

Utilizzando ReactJs, quando aggiungo il file di stile a index.html usando un collegamento relativo come

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

e poi mi dirigo verso un itinerario dire; localhost:3000/artiste aggiorna, ottengo l'errore.

L'errore è scomparso dopo che ho sostituito il collegamento relativo con un collegamento assoluto dire;

<link rel="stylesheet" href="http://localhost/project/public/css/style.css".

Ho riscontrato questo problema durante il caricamento di CSS per un modulo di layout React che ho installato con npm. Devi importare due file .css per far funzionare questo modulo, quindi inizialmente li ho importati in questo modo:

@import "../../../../node_modules/react-grid-layout/css/styles.css";

ma ho scoperto che l'estensione del file deve essere abbandonata, quindi ha funzionato:

@import "../../../../node_modules/react-grid-layout/css/styles";

Se nodejs e l'utilizzo di express funzionano sotto il codice seguente ...

res.set('Content-Type', 'text/css');

Ho lo stesso identico problema e dopo qualche minuto scherzando decifrai che mi mancava di aggiungere l'estensione del file alla mia intestazione. così ho cambiato la seguente riga:

<link uic-remove rel="stylesheet" href="css/bahblahblah">

per

<link uic-remove rel="stylesheet" href="css/bahblahblah.css"> 

Ho iniziato a riscontrare il problema oggi solo su Chrome e non su Safari per lo stesso progetto / URL per il mio contenitore goormide (node.js)

Dopo aver provato diversi suggerimenti sopra che non sembravano funzionare e tornare indietro su alcune modifiche al codice che ho apportato da ieri a oggi, che non ha fatto alcuna differenza, sono finito nelle impostazioni di Chrome facendo clic su:

1.Settings;

2. Scorri verso il basso, seleziona: "Avanzate";

3. Scorri verso il basso, seleziona: "Ripristina le impostazioni predefinite originali";

Ciò sembra aver risolto il problema poiché non ricevo più l'avviso / errore nella console e la pagina viene visualizzata come dovrebbe. Leggendo i post sopra sembra che il problema possa verificarsi da qualsiasi numero di fonti, quindi il ripristino delle impostazioni è una potenziale soluzione generica. Saluti

Se stai offrendo l'app in prod, assicurati di servire i file statici con il service man. Ho avuto questo errore quando servivo solo una sottocartella statica di React build su Django (senza risorse che hanno stili)

Utilizzando React

Ho riscontrato questo errore nella mia app del profilo di reazione. La mia app si è comportata come se stesse cercando di fare riferimento a un URL che non esiste. Credo che ciò abbia a che fare con il comportamento del webpack.

Se stai collegando i file nella tua cartella pubblica, devi ricordare di utilizzare% PUBLIC_URL% prima della risorsa in questo modo:

<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css" />