Sumber daya diartikan sebagai stylesheet tetapi ditransfer dengan tipe teks MIME / html (tampaknya tidak terkait dengan server web)

Saya punya masalah ini. Chrome terus mengembalikan kesalahan ini

Sumber daya diartikan sebagai stylesheet tetapi ditransfer dengan tipe teks MIME / html

File-file yang dipengaruhi oleh kesalahan ini hanyalah Style, terpilih dan jquery-gentleselect (file CSS lain yang diimpor dalam indeks dengan cara yang sama berfungsi dengan baik dan tanpa kesalahan). Saya sudah memeriksa tipe MIME saya dan teks / css sudah ada di CSS.

Jujur saya ingin memulai dengan memahami masalah (hal yang sepertinya tidak bisa saya lakukan sendiri).

Saya ingin memulai dengan memahami masalahnya

Browser membuat permintaan HTTP ke server. Server kemudian membuat respons HTTP.

Baik permintaan dan tanggapan terdiri dari sekelompok tajuk dan badan (terkadang opsional) dengan beberapa konten di dalamnya.

Jika ada tubuh, maka salah satu header adalah Content-Typeyang menggambarkan apa tubuh itu (apakah itu dokumen HTML? Gambar? Isi pengajuan formulir? Dll).

Saat Anda meminta stylesheet Anda, server Anda memberi tahu browser bahwa itu adalah dokumen HTML ( Content-Type: text/html) alih-alih stylesheet ( Content-Type: text/css).

Saya sudah memeriksa myme.type saya dan teks / css sudah ada di css.

Kemudian ada hal lain tentang server Anda yang membuat stylesheet datang dengan tipe konten yang salah.

Gunakan tab Net alat pengembang browser Anda untuk memeriksa permintaan dan respons.

Menggunakan sudut?

Ini adalah peringatan yang sangat penting untuk diingat.

Tag dasar harus tidak hanya berada di kepala tetapi di lokasi yang tepat.

Saya memiliki tag dasar saya di tempat yang salah di kepala, seharusnya ada sebelum tag dengan permintaan url. Pada dasarnya menempatkannya sebagai tag kedua di bawah judul menyelesaikannya untuk saya.

<base href="/">

Saya menulis sedikit posting di sini

Saya juga punya masalah dengan kesalahan ini, dan menemukan solusi. Ini tidak menjelaskan mengapa kesalahan terjadi, tetapi tampaknya untuk memperbaikinya dalam beberapa kasus.

Sertakan garis miring / sebelum path ke file css, seperti:

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

Masalah saya lebih sederhana daripada semua jawaban di pos ini.

Saya harus mengatur IIS untuk memasukkan konten statis.

Coba ini <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

dimana ##foldermu dimana .CSS - file kamu

Jangan lupa tentang: ..(titik ganda).

Mengatur Kredensial Otentikasi Anonim ke Application Pool Identity telah membantu saya.

Saya juga menghadapi masalah yang sama. Dan setelah melakukan beberapa R&D, saya menemukan bahwa masalahnya ada pada nama file. Nama file sebenarnya adalah "lightgallery.css" tetapi saat menautkan saya telah mengetik "lightGallery.css" .

Info lebih lanjut:

Ini bekerja dengan baik di localhost saya (OS: Windows 8.1 & Server: Apache). Tetapi ketika saya mengunggah aplikasi saya ke server jarak jauh (Berbeda OS & server Web daripada localhost saya) itu tidak berfungsi, memberi saya kesalahan yang sama seperti milik Anda.

Jadi, masalahnya adalah sensitivitas kasus (sehubungan dengan nama file) dari server.

Berdasarkan jawaban lain, sepertinya pesan ini memiliki banyak penyebab, saya pikir saya hanya akan membagikan solusi pribadi saya jika ada orang yang memiliki masalah persis dengan saya di masa depan.

Situs kami memuat file CSS dari distribusi AWS Cloudfront, yang menggunakan bucket S3 sebagai asalnya. Ember S3 khusus ini disinkronkan dengan server Linux yang menjalankan Jenkins. The syncperintah melalui s3cmdset Content-Type untuk objek S3 secara otomatis berdasarkan apa yang dikatakan OS (mungkin berdasarkan ekstensi file). Untuk beberapa alasan, di server kami, semua jenis diatur dengan benar kecuali .cssfile, yang memberi jenis text/plain. Di S3, saat Anda memeriksa metadata di properti file, Anda bisa mengatur tipe ke apa pun yang Anda inginkan. Mengaturnya agar text/csssitus kami dapat menginterpretasikan file dengan benar sebagai CSS dan memuat dengan benar.

Jika Anda melayani css statis dengan nginx, Anda harus menambahkan

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

atau

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

ke nginx conf

@Rob Sedgwick memberi saya petunjuk, Namun, dalam kasus saya aplikasi saya adalah Spring Boot Application . Jadi saya baru saja menambahkan pengecualian di Konfigurasi Keamanan saya untuk jalur ke file yang bersangkutan ...

CATATAN - Solusi ini berbasis SpringBoot ... Apa yang perlu Anda lakukan mungkin berbeda berdasarkan bahasa pemrograman yang Anda gunakan dan / atau kerangka kerja apa yang Anda gunakan

Namun yang perlu diperhatikan adalah;

Pada dasarnya masalah dapat disebabkan ketika setiap permintaan, termasuk yang untuk konten statis diautentikasi.

Jadi katakanlah beberapa jalur ke konten statis saya yang menyebabkan kesalahan adalah sebagai berikut;

Jalur yang disebut "plugin"

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

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

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

Dan jalan yang disebut "halaman"

http: // localhost: 8080 / halaman / styles / css / style-1.css

http: // localhost: 8080 / halaman / styles / css / style-2.css

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

Kemudian saya hanya menambahkan pengecualian sebagai berikut di Konfig Keamanan Boot Spring saya;

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

}

Bersulang!

Menggunakan sudut

Dalam kasus saya menggunakan ng-hrefalih-alih hrefmemecahkannya untuk saya.

Catatan :

Saya bekerja dengan laravel sebagai back-end

saya menghadapi hal yang sama, dengan semacam file .htaccess yang sama untuk membuat url cantik. setelah beberapa jam melihat-lihat dan bereksperimen. Saya menemukan bahwa kesalahan itu karena relatif menghubungkan file.

browser akan mulai mengambil file html sumber yang sama untuk semua file css, js dan gambar, ketika saya akan menelusuri beberapa langkah jauh ke dalam server.

untuk mengatasi ini, Anda dapat menggunakan <base>tag pada sumber html Anda,

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

dan tautan ke file seperti,

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

atau gunakan tautan absolut untuk semua file Anda.

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

Jika Anda menggunakan JSP, masalah ini dapat berasal dari pemetaan servlet Anda. jika pemetaan Anda menggunakan url dengan defaut seperti ini:

@WebServlet("/")

kemudian wadah menafsirkan url css Anda, dan pergi ke servlet alih-alih pergi ke file css.

Saya memiliki masalah yang sama, saya mengubah pemetaan saya dan sekarang semuanya bekerja

Saya memiliki masalah serupa di MVC4 menggunakan otentikasi bentuk. Masalahnya adalah baris ini di web.config,

<modules runAllManagedModulesForAllRequests="true">

Ini berarti bahwa setiap permintaan, termasuk permintaan untuk konten statis, sedang diautentikasi.

Ubah baris ini ke:

<modules runAllManagedModulesForAllRequests="false">

Saya juga menghadapi masalah ini baru-baru ini di chrome . Saya hanya memberikan jalur absolut untuk menyelesaikan masalah file CSS saya.

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

Saya ingin memperluas titik Todd R di OP. Di halaman asp.net, web.configfile mendefinisikan izin yang diperlukan untuk mengakses setiap file atau folder dalam aplikasi. Dalam kasus kami, folder file CSS tidak memungkinkan akses untuk pengguna yang tidak sah, menyebabkannya gagal pada halaman login sebelum pengguna diotorisasi. Mengubah izin yang diperlukan pada web.configpengguna yang diizinkan yang tidak sah untuk mengakses file CSS dan menyelesaikan masalah ini.

Jika ada yang datang ke posting ini dan memiliki masalah yang sama. Saya baru saja mengalami masalah yang serupa, tetapi solusinya cukup sederhana.

Seorang pengembang keliru menjatuhkan salinan web.config ke direktori CSS. Setelah dihapus, semua kesalahan diselesaikan dan halaman ditampilkan dengan benar.

Saya menemukan masalah yang sama saat melanjutkan pekerjaan pada proyek tumpukan MEAN lama. Saya menggunakan nodemonserver pengembangan lokal saya dan mendapatkan kesalahan yang sama Resource interpreted as stylesheet but transferred with MIME type text/html. Aku berubah dari nodemonyang http-serveryang dapat ditemukan di sini . Segera bekerja untuk saya.

Itu karena Anda harus menetapkan tipe konten sebagai teks / html alih-alih teks / css untuk halaman server Anda (php, node.js dll)

Ini terjadi ketika saya menghapus protokol dari tautan css untuk stylesheet css yang dilayani oleh google CDN.

Ini tidak memberikan kesalahan:

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

Tetapi ini memberikan sumber kesalahan yang ditafsirkan sebagai Stylesheet tetapi ditransfer dengan MIME ketik teks / html :

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

Saya menghadapi masalah serupa. Dan Menjelajahi solusi di halaman Stack Overflow yang fantastis ini.

respon pengguna54861 ​​(ketidakcocokan nama dalam hal sensitivitas) membuat saya penasaran untuk memeriksa kode saya lagi dan menyadari bahwa " Saya tidak mengunggah dua file js yang saya muatkan dalam tag kepala ". :-)

Ketika saya mengunggahnya, masalahnya hilang! Kode berjalan dan laman ditampilkan tanpa kesalahan lain!

Jadi, moral dari cerita ini adalah jangan lupa untuk memastikan bahwa semua file js Anda diunggah ke mana halaman mencari mereka.

Saya menemukan masalah yang sama dengan aplikasi .NET, sebuah open-source CMS yang disebut MojoPortal. Di salah satu tema dan skin saya untuk situs tertentu, saat menjelajah atau mengujinya akan menggiling dan melambat seperti tersedak.

Masalah saya bukan dari atribut "type" untuk CSS tapi itu "hal lain". Perubahan persis saya ada di Web.Config . Saya mengubah semua nilai menjadi FALSE untuk MinifyCSS, CacheCssOnserver, dan CacheCSSinBrowser.

Setelah itu diatur, situs web cepat sekali lagi dalam produksi.

Mengalami kesalahan yang sama karena saya lupa mengirim header yang benar dulu

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

Menggunakan ReactJs, ketika saya menambahkan file gaya ke index.html menggunakan tautan relatif seperti

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

dan kemudian saya menavigasi ke rute mengatakan; localhost:3000/artistdan menyegarkan, saya mendapatkan kesalahan.

Kesalahan menghilang setelah saya mengganti tautan relatif dengan tautan absolut, katakan;

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

Saya mengalami masalah ini ketika memuat CSS untuk modul Layout React yang saya instal dengan npm. Anda harus mengimpor dua file .css untuk menjalankan modul ini, jadi saya awalnya mengimpornya seperti ini:

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

tetapi menemukan bahwa ekstensi file harus dihapus, jadi ini berfungsi:

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

Jika nodejs dan menggunakan express , kode di bawah ini berfungsi ...

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

Saya memiliki masalah yang persis sama dan setelah beberapa menit bermain-main saya mengartikan bahwa saya ketinggalan untuk menambahkan ekstensi file ke header saya. jadi saya mengubah baris berikut:

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

untuk

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

Saya mulai mendapatkan masalah hari ini hanya pada chrome dan bukan safari untuk proyek / url yang sama untuk wadah goormide saya (node.js)

Setelah mencoba beberapa saran di atas yang tampaknya tidak berfungsi dan mundur pada beberapa perubahan kode yang saya buat dari kemarin hingga hari ini yang juga tidak membuat perbedaan, saya berakhir dengan mengklik pengaturan chrome:

1. Pengaturan;

2. turun ke bawah, pilih: "Advanced";

3. gulir ke bawah, pilih: "Kembalikan pengaturan ke default aslinya";

Itu tampaknya telah memperbaiki masalah karena saya tidak lagi mendapatkan peringatan / kesalahan di konsol dan halaman ditampilkan sebagaimana mestinya. Membaca tulisan di atas tampaknya masalah dapat terjadi dari sejumlah sumber sehingga pengaturan ulang adalah perbaikan generik yang potensial. Bersulang

Jika Anda melayani aplikasi di prod pastikan Anda melayani file statis dengan pekerja layanan. Saya memiliki kesalahan ini ketika saya hanya melayani subfolder statis React build on Django (tanpa aset yang memiliki gaya)

Menggunakan Bereaksi

Saya menemukan kesalahan ini di aplikasi profil reaksi saya. Aplikasi saya berperilaku seperti sedang mencoba mereferensikan url yang tidak ada. Saya percaya ini ada hubungannya dengan bagaimana perilaku webpack.

Jika Anda menautkan file di folder publik, Anda harus ingat untuk menggunakan% PUBLIC_URL% sebelum sumber daya seperti ini:

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