Kaynak, stil sayfası olarak yorumlandı ancak MIME türü metin / html ile aktarıldı (web sunucusuyla ilişkili görünmüyor)

Bu sorunum var. Chrome bu hatayı döndürmeye devam ediyor

Kaynak stil sayfası olarak yorumlandı ancak MIME türü metin / html ile aktarıldı

Bu hatadan etkilenen dosyalar yalnızca Stil, seçilen ve jquery-gentleselect'tir (dizine aynı şekilde içe aktarılan diğer CSS dosyaları iyi ve hatasız çalışır). MIME türümü zaten kontrol ettim ve text / css zaten CSS'de.

Dürüst olmak gerekirse, sorunu anlayarak başlamak istiyorum (tek başına yapamayacağım bir şey).

problemi anlayarak başlamak istiyorum

Tarayıcılar, sunuculara HTTP istekleri gönderir. Sunucu daha sonra bir HTTP yanıtı verir.

Hem istek hem de yanıtlar, bir grup üstbilgi ve içinde bazı içerik bulunan (bazen isteğe bağlı) bir gövdeden oluşur.

Bir gövde varsa, o zaman başlıklardan biri, Content-Typegövdenin ne olduğunu tanımlar (bu bir HTML belgesi mi? Resim mi? Form gönderiminin içeriği? Vb.).

Stil sayfanızı istediğinde, sunucunuz tarayıcıya Content-Type: text/htmlstil sayfası ( Content-Type: text/css) yerine HTML belgesi ( ) olduğunu söyler .

Myme.type'imi zaten kontrol ettim ve text / css zaten css'de.

Sonra sunucunuzla ilgili başka bir şey, bu stil sayfasının yanlış içerik türüyle gelmesini sağlıyor.

İsteği ve yanıtı incelemek için tarayıcınızın geliştirici araçlarının Net sekmesini kullanın.

Açısal mı kullanıyorsunuz?

Bu hatırlanması gereken çok önemli bir uyarı.

Temel etiket yalnızca başlıkta değil, doğru yerde olmalıdır.

Temel etiketi kafamda yanlış yerde tuttum, url istekleri olan herhangi bir etiketten önce gelmelidir. Temelde başlığın altındaki ikinci etiket olarak yerleştirmek benim için çözdü.

<base href="/">

Bunun üzerine biraz yazı yazdım buraya

Ayrıca bu hatayla ilgili sorunum vardı ve bir çözüm buldum. Bu, hatanın neden oluştuğunu açıklamaz, ancak bazı durumlarda düzeltildi gibi görünüyor.

Eğik çizgi / css dosyasının yolundan önce şunu ekleyin :

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

Sorunum bu yayındaki tüm cevaplardan daha basitti.

IIS'yi statik içerik içerecek şekilde ayarlamam gerekiyordu.

Bunu dene <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

##klasörünüz nerede .CSS dosyanız

Unutmayın: ..(çift nokta).

Anonim Kimlik Doğrulama Kimlik Bilgilerini Uygulama Havuzu Kimliğine ayarlamak benim için hile yaptı.

Ben de aynı sorunla karşı karşıyaydım. Biraz Ar-Ge yaptıktan sonra, sorunun dosya adıyla ilgili olduğunu buldum. Gerçek dosyanın adı "lightgallery.css" idi, ancak bağlanırken "lightGallery.css" yazdım .

Daha fazla bilgi:

Benim localhost üzerinde iyi çalıştı (OS: Windows 8.1 ve Sunucu: Apache). Ancak uygulamamı uzak bir sunucuya yüklediğimde (localhost'umdan farklı bir OS ve Web sunucusu) işe yaramadı ve bana seninkiyle aynı hatayı verdi.

Bu nedenle, sorun sunucunun büyük / küçük harfe duyarlılığıydı.

Diğer cevaplara dayanarak, bu mesajın birçok nedeni olduğu anlaşılıyor, gelecekte herhangi bir sorunum olması durumunda bireysel çözümümü paylaşacağımı düşündüm.

Sitemiz, CSS dosyalarını başlangıç ​​noktası olarak S3 grubu kullanan bir AWS Cloudfront dağıtımından yükler. Bu özel S3 grubu, Jenkins çalıştıran bir Linux sunucusuyla senkronize tutuldu. syncAracılığıyla komut s3cmdsetleri otomatik işletim söylediklerini dayalı S3 nesne için Content-Type (muhtemelen dosya uzantısına göre). Bazı nedenlerden dolayı, sunucumuzda, .csstürünü verdiği dosyalar dışında tüm türler doğru ayarlanmıştı text/plain. S3'te, bir dosyanın özelliklerindeki meta verileri kontrol ettiğinizde, türü istediğiniz gibi ayarlayabilirsiniz. text/cssSitemizin dosyaları doğru bir şekilde CSS olarak yorumlamasına ve doğru şekilde yüklemesine izin verecek şekilde ayarlamak .

Nginx ile statik css sunmanız durumunda

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

veya

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

nginx conf'e

@Rob Sedgwick'in cevabı bana bir işaretçi verdi, Ancak benim durumumda uygulamam Spring Boot Uygulamasıydı . Bu nedenle, ilgili dosyalara giden yollar için Güvenlik Yapılandırmam'a hariç tutmalar ekledim ...

NOT - Bu çözüm SpringBoot tabanlıdır ... Yapmanız gerekenler, hangi programlama dilini kullandığınıza ve / veya hangi çerçeveyi kullandığınıza bağlı olarak değişebilir

Ancak dikkat edilmesi gereken nokta;

Temelde sorun, statik içerik için olanlar da dahil olmak üzere her istek doğrulandığında ortaya çıkabilir.

Diyelim ki hatalara neden olan statik içeriğime giden bazı yollar aşağıdaki gibidir;

"Eklentiler" adı verilen bir yol

http: // localhost: 8080 / plugins / stilleri / css / dosya-1.css

http: // localhost: 8080 / plugins / stilleri / css / dosya-2.css

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

Ve "sayfalar" adı verilen bir yol

http: // localhost: 8080 / sayfalar / stilleri / css / stil 1.css

http: // localhost: 8080 / sayfalar / stilleri / css / stil 2.css

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

Daha sonra, Spring Boot Security Config'imde hariç tutmaları şu şekilde ekliyorum;

@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
    }

}

Şerefe!

Açısal Kullanımı

Benim durumumda kullanmak ng-hrefyerinehref için çözdü.

Not :

Laravel ile arka uç olarak çalışıyorum

Ben aynı şey, güzel urls yapmak için aynı .htaccess dosyası ile karşı karşıya idi. birkaç saat sonra etrafa bakıp denedikten sonra. Ben hata nispeten bağlantı dosyaları nedeniyle olduğunu öğrendim.

sunucuya birkaç adım derinliklerine göz atarsanız tarayıcı tüm css, js ve görüntü dosyaları için aynı kaynak html dosyasını getirmeye başlayacaktır.

buna karşı koymak için <base>etiketi html kaynağınızda kullanabilirsiniz,

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

gibi dosyalara bağlantı verebilir,

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

veya tüm dosyalarınız için mutlak bağlantılar kullanın.

<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" />

JSP kullanıyorsanız, bu sorun sunucu uygulaması eşlemenizden gelebilir. eşlemeniz URL'yi varsayılan olarak şu şekilde alırsa:

@WebServlet("/")

kapsayıcı css url'nizi yorumlar ve css dosyasına gitmek yerine sunucu uygulamasına gider.

aynı sorunu yaşadım, haritamı değiştirdim ve şimdi her şey çalışıyor

MVC4 form kimlik doğrulamasını kullanarak benzer bir sorun var. Sorun web.config dosyasındaki bu satırdı,

<modules runAllManagedModulesForAllRequests="true">

Bu, statik içerik dahil olmak üzere her isteğin kimliğinin doğrulandığı anlamına gelir.

Bu satırı şu şekilde değiştirin:

<modules runAllManagedModulesForAllRequests="false">

Bu sorunla son zamanlarda kromda da karşılaşıyorum . Ben sadece benim CSS dosya sorunu çözmek için mutlak yol vermek.

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

Todd R'nin OP'deki noktasını genişletmek istiyorum. Asp.net sayfalarında web.configdosya, uygulamadaki her dosya veya klasöre erişmek için gereken izinleri tanımlar. Bizim durumumuzda, CSS dosyalarının klasörü yetkisiz kullanıcılar için erişime izin vermedi ve bu da kullanıcı yetkilendirilmeden önce giriş sayfasında başarısız olmasına neden oldu. web.configYetkisiz kullanıcıların CSS dosyalarına erişmesine izin vererek bu izinleri değiştirmek ve bu sorunu çözdü.

Herhangi birinin bu gönderiye gelmesi ve benzer bir sorunu olması durumunda. Benzer bir sorun yaşadım, ancak çözüm oldukça basitti.

Bir geliştirici yanlışlıkla web.config dosyasının bir kopyasını CSS dizinine bırakmıştı. Silindikten sonra tüm hatalar çözüldü ve sayfa düzgün bir şekilde görüntülendi.

Eski bir MEAN yığın projesinde çalışmaya devam ederken aynı sorunla karşılaştım. nodemonYerel geliştirme sunucum olarak kullanıyordum ve aynı hatayı aldım Resource interpreted as stylesheet but transferred with MIME type text/html. Ben değiştirilen nodemoniçin http-serverbulunabilir hangi burada . Hemen benim için çalıştı.

Bunun nedeni, içerik türünüzü sunucu sayfanız için metin / css yerine metin / html olarak ayarlamanız gerektiğidir (php, node.js vb.)

Bu, bir google CDN tarafından sunulan bir css stil sayfası için css bağlantısından protokolü kaldırdığımda meydana geldi.

Bu hiçbir hata vermez:

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

Ancak bu, Kaynak'ın Stil Sayfası olarak yorumlanan ancak MIME türü metin / html ile aktarılan hatasını verir :

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

Benzer bir sorunla karşı karşıyaydım. Ve bu fantastik Stack Overflow sayfasındaki çözümleri keşfedin.

user54861 ​​yanıtı (duyarlılık durumunda isimlerle eşleşmiyor) kodumu tekrar incelemeyi merak ediyor ve " Baş etiketine yüklediğim iki js dosyasını yüklemedim " ". :-)

Onları yüklediğimde sorun kaçıyor! Ve kod çalışır ve başka bir hata olmadan işlenmiş sayfa!

Yani, hikayenin ahlaki tüm js dosyalarınızın sayfanın aradığı yere yüklendiğinden emin olmayı unutmayın.

Aynı sorun, MojoPortal adlı bir CMS açık kaynak olan bir .NET uygulamasıyla da karşılaştım. Belirli bir site için temalarımdan ve cildimden birinde, göz atarken veya test ederken boğulma gibi öğütülür ve yavaşlar.

Benim sorunum CSS için "type" özniteliği değildi ama "başka bir şey" oldu. Tam değişikliğim Web.Config dosyasındaydı . MinifyCSS, CacheCssOnserver ve CacheCSSinBrowser için tüm değerleri FALSE olarak değiştirdim.

Bu ayarlandıktan sonra web sitesi üretimde bir kez daha hızlıydı.

Aynı hatayla karşılaştım çünkü ilk önce doğru bir başlık göndermeyi unuttum

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

ReactJs kullanarak, index.html gibi göreli bağlantı kullanarak stil dosyası eklediğimde

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

ve sonra demek ki bir rotaya giderim; localhost:3000/artistve yenileyin, hatayı alıyorum.

Göreceli bağlantıyı mutlak bir bağlantı ile değiştirdikten sonra hata kayboldu;

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

Npm ile yüklediğim bir React düzen modülü için CSS yüklerken bu sorunla karşılaştım. Bu modülü çalıştırmak için iki .css dosyasını içe aktarmanız gerekiyor, bu yüzden başlangıçta bunları şu şekilde içe aktardım:

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

ancak dosya uzantısının bırakılması gerektiğini öğrendi, bu yüzden bu işe yaradı:

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

Eğer nodejs ve kullanma ifade kod işler aşağıda ...

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

Aynı sorun var ve birkaç dakika sonra dalga geçmeyi başlığımda dosya uzantısını eklemek için özledim deşifre. bu yüzden aşağıdaki satırı değiştirdim:

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

için

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

Bugün sorunu sadece kromda almaya başladım ve goormide konteynırım için aynı proje / url için safari değil (node.js)

Yukarıdaki bazı önerileri denedikten sonra işe yaramadı ve dünden bugüne kadar yaptığım bazı kod değişikliklerinde geri izleme yaptım ve bu da krom ayarlarında tıkladım:

1.Settings;

2. aşağıya doğru ilerleyin, seçin: "Gelişmiş";

3. aşağıya doğru ilerleyin, şunları seçin: "Ayarları orijinal varsayılanlarına geri yükle";

Artık konsolda uyarı / hata almadığımda ve sayfa olması gerektiği gibi görüntülenen sorun giderildi. Yukarıdaki gönderileri okumak, sorunun herhangi bir sayıdaki kaynaktan kaynaklanabileceği anlaşılmaktadır, bu nedenle ayarları sıfırlama olası bir genel çözümdür. Şerefe

Ürünü uygulama olarak sunuyorsanız, statik dosyaları servis çalışanıyla sunduğunuzdan emin olun. Ben Django (stilleri varlıkları olmadan) React inşa sadece statik alt klasör sunarken bu hatayı vardı

React Kullanımı

Reaksiyon profili uygulamamda bu hatayla karşılaştım. Uygulamam, var olmayan bir URL'ye başvurmaya çalışıyormuş gibi davrandı. Bunun web paketinin davranışlarıyla bir ilgisi olduğuna inanıyorum.

Ortak klasörünüzdeki dosyaları bağlıyorsanız, aşağıdaki gibi kaynaklardan önce% PUBLIC_URL% kullanmayı unutmayın:

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