Tài nguyên được hiểu là biểu định kiểu nhưng được chuyển bằng văn bản / html loại MIME (dường như không liên quan đến máy chủ web)

Tôi có vấn đề này. Chrome tiếp tục trả lại lỗi này

Tài nguyên được hiểu là biểu định kiểu nhưng được chuyển bằng văn bản / html loại MIME

Các tệp bị ảnh hưởng bởi lỗi này chỉ là Kiểu, được chọn và jquery-gentleselect (các tệp CSS khác được nhập trong chỉ mục theo cùng một cách hoạt động tốt và không có lỗi). Tôi đã kiểm tra loại MIME của tôi và văn bản / css đã có trên CSS.

Thành thật mà nói tôi muốn bắt đầu bằng cách hiểu vấn đề (một điều mà dường như tôi không thể làm một mình).

tôi muốn bắt đầu bằng cách hiểu vấn đề

Trình duyệt thực hiện yêu cầu HTTP đến máy chủ. Sau đó, máy chủ thực hiện phản hồi HTTP.

Cả hai yêu cầu và phản hồi bao gồm một loạt các tiêu đề và cơ thể (đôi khi là tùy chọn) với một số nội dung trong đó.

Nếu có một phần thân, thì một trong các tiêu đề là phần Content-Typemô tả phần thân đó là gì (nó có phải là tài liệu HTML không? Hình ảnh? Nội dung của bản đệ trình biểu mẫu? V.v.).

Khi bạn hỏi về biểu định kiểu của mình, máy chủ của bạn sẽ báo cho trình duyệt biết đó là tài liệu HTML ( Content-Type: text/html) thay vì biểu định kiểu ( Content-Type: text/css).

Tôi đã kiểm tra myme.type của tôi và văn bản / css đã có trên css.

Sau đó, một cái gì đó khác về máy chủ của bạn đang làm cho biểu định kiểu đó đi kèm với loại nội dung sai.

Sử dụng tab Net của các công cụ dành cho nhà phát triển trình duyệt của bạn để kiểm tra yêu cầu và phản hồi.

Dùng góc?

Đây là một cảnh báo rất quan trọng cần nhớ.

Thẻ cơ sở không chỉ cần ở trong đầu mà ở đúng vị trí.

Tôi đã có thẻ cơ sở của tôi ở sai vị trí trong đầu, nó sẽ xuất hiện trước bất kỳ thẻ nào có yêu cầu url. Về cơ bản, đặt nó làm thẻ thứ hai bên dưới tiêu đề đã giải quyết nó cho tôi.

<base href="/">

Tôi đã viết một bài đăng nhỏ về nó ở đây

Tôi cũng gặp vấn đề với lỗi này và đã tìm ra giải pháp. Điều này không giải thích tại sao lỗi xảy ra, nhưng nó dường như khắc phục nó trong một số trường hợp.

Bao gồm một dấu gạch chéo về phía trước / trước đường dẫn đến tệp css, như vậy:

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

Vấn đề của tôi đơn giản hơn tất cả các câu trả lời trong bài viết này.

Tôi đã phải thiết lập IIS để bao gồm nội dung tĩnh.

Thử cái này <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

##thư mục của bạn ở đâu trong đó là .CSS - tệp của bạn

Đừng quên về: ..(dấu chấm kép).

Đặt Thông tin xác thực ẩn danh cho nhóm ứng dụng Nhận dạng đã giúp tôi.

Tôi cũng đang đối mặt với vấn đề tương tự. Và sau khi thực hiện một số nghiên cứu và phát triển, tôi thấy rằng vấn đề là do tên tệp. Tên của tệp thực tế là "lightgallery.css" nhưng trong khi liên kết tôi đã gõ "lightGallery.css" .

Thêm thông tin:

Nó hoạt động tốt trên localhost của tôi (HĐH: Windows 8.1 & Server: Apache). Nhưng khi tôi tải ứng dụng của mình lên một máy chủ từ xa (Máy chủ web và hệ điều hành khác với máy chủ cục bộ của tôi) thì nó không hoạt động, gây ra lỗi tương tự như của bạn.

Vì vậy, vấn đề là độ nhạy trường hợp (liên quan đến tên tệp) của máy chủ.

Dựa trên các câu trả lời khác, có vẻ như tin nhắn này có rất nhiều nguyên nhân, tôi nghĩ tôi chỉ chia sẻ giải pháp cá nhân của mình trong trường hợp có ai gặp vấn đề chính xác của tôi trong tương lai.

Trang web của chúng tôi tải các tệp CSS từ bản phân phối AWS Cloudfront, sử dụng nhóm S3 làm gốc. Nhóm S3 đặc biệt này đã được giữ đồng bộ hóa với máy chủ Linux chạy Jenkins. Các synclệnh thông qua s3cmdbộ các Content-Type cho đối tượng S3 tự động dựa trên những gì hệ điều hành nói (có lẽ dựa trên phần mở rộng tập tin). Vì một số lý do, trong máy chủ của chúng tôi, tất cả các loại đã được đặt chính xác ngoại trừ .csscác tệp mà nó đã cung cấp loại text/plain. Trong S3, khi bạn kiểm tra siêu dữ liệu trong các thuộc tính của tệp, bạn có thể đặt loại thành bất cứ thứ gì bạn muốn. Đặt nó để text/csscho phép trang web của chúng tôi diễn giải chính xác các tệp dưới dạng CSS và tải chính xác.

Trong trường hợp bạn phục vụ css tĩnh với nginx, bạn nên thêm

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

hoặc là

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

đến nginx conf

Câu trả lời của @Rob Sedgwick đã cho tôi một con trỏ, tuy nhiên, trong trường hợp của tôi, ứng dụng của tôi là Ứng dụng khởi động mùa xuân . Vì vậy, tôi chỉ thêm các loại trừ trong Cấu hình bảo mật của mình cho các đường dẫn đến các tệp có liên quan ...

LƯU Ý - Giải pháp này dựa trên SpringBoot ... Những gì bạn có thể cần làm có thể khác nhau dựa trên ngôn ngữ lập trình bạn đang sử dụng và / hoặc khuôn khổ nào bạn đang sử dụng

Tuy nhiên, điểm cần lưu ý là;

Về cơ bản vấn đề có thể được gây ra khi mọi yêu cầu, bao gồm cả những yêu cầu cho nội dung tĩnh đang được xác thực.

Vì vậy, hãy nói một số đường dẫn đến nội dung tĩnh của tôi đã gây ra lỗi như sau;

Một đường dẫn gọi là "plugin"

http: // localhost: 8080 / plugin / style / css / file-1.css

http: // localhost: 8080 / plugin / style / css / file-2.css

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

Và một đường dẫn gọi là "trang"

http: // localhost: 8080 / trang / style / css / style-1.css

http: // localhost: 8080 / trang / style / css / style-2.css

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

Sau đó, tôi chỉ cần thêm các loại trừ như sau trong Spring Boot Security Config của mình;

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

}

Chúc mừng!

Sử dụng góc

Trong trường hợp của tôi sử dụng ng-hrefthay vì hrefgiải quyết nó cho tôi.

Ghi chú :

Tôi đang làm việc với laravel là back-end

tôi đã phải đối mặt với điều tương tự, với loại tệp .htaccess tương tự để tạo ra các url đẹp. sau vài giờ nhìn xung quanh và thử nghiệm. tôi phát hiện ra rằng lỗi là do các tập tin tương đối liên kết.

trình duyệt sẽ bắt đầu tìm nạp cùng một tệp html nguồn cho tất cả các tệp css, js và hình ảnh, khi tôi sẽ duyệt một vài bước sâu vào máy chủ.

để chống lại điều này, bạn có thể sử dụng <base>thẻ trên nguồn html của mình,

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

và liên kết đến các tập tin như,

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

hoặc sử dụng các liên kết tuyệt đối cho tất cả các tập tin của bạ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" />

Nếu bạn đang ở trên JSP, vấn đề này có thể đến từ ánh xạ servlet của bạn. nếu ánh xạ của bạn mất url bằng cách tự động như thế này:

@WebServlet("/")

sau đó, container giải thích url css của bạn và đi đến servlet thay vì đi đến tệp css.

tôi có cùng một vấn đề, tôi đã thay đổi bản đồ của mình và bây giờ mọi thứ đều hoạt động

Tôi có một vấn đề tương tự trong MVC4 khi sử dụng xác thực mẫu. Vấn đề là dòng này trong web.config,

<modules runAllManagedModulesForAllRequests="true">

Điều này có nghĩa là mọi yêu cầu, bao gồm cả những yêu cầu cho nội dung tĩnh, được xác thực.

Thay đổi dòng này thành:

<modules runAllManagedModulesForAllRequests="false">

Tôi cũng phải đối mặt với vấn đề này gần đây trên chrome . Tôi chỉ đưa ra đường dẫn tuyệt đối để giải quyết vấn đề tệp CSS của tôi.

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

Tôi muốn mở rộng quan điểm của Todd R trong OP. Trong các trang asp.net, web.configtệp xác định các quyền cần thiết để truy cập từng tệp hoặc thư mục trong ứng dụng. Trong trường hợp của chúng tôi, thư mục tệp CSS không cho phép người dùng trái phép truy cập, khiến nó bị lỗi trên trang đăng nhập trước khi người dùng được ủy quyền. Thay đổi các quyền cần thiết trong web.configngười dùng trái phép được phép truy cập các tệp CSS và giải quyết vấn đề này.

Trong trường hợp bất cứ ai đến bài viết này và có một vấn đề tương tự. Tôi vừa trải qua một vấn đề tương tự, nhưng giải pháp khá đơn giản.

Một nhà phát triển đã bỏ nhầm một bản sao của web.config vào thư mục CSS. Sau khi xóa, tất cả các lỗi đã được giải quyết và trang hiển thị đúng.

Tôi đã gặp một vấn đề tương tự trong khi tiếp tục công việc trong một dự án stack MEAN cũ. Tôi đã sử dụng nodemonnhư máy chủ phát triển địa phương của tôi và gặp lỗi tương tự Resource interpreted as stylesheet but transferred with MIME type text/html. Tôi đã thay đổi từ nodemonđể http-servercó thể tìm thấy ở đây . Nó ngay lập tức làm việc cho tôi.

Đó là bởi vì bạn phải đặt loại nội dung là văn bản / html thay vì văn bản / css cho trang máy chủ của bạn (php, node.js, v.v.)

Điều này xảy ra khi tôi xóa giao thức khỏi liên kết css cho biểu định kiểu css được cung cấp bởi google CDN.

Điều này không có lỗi:

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

Nhưng điều này mang lại cho Tài nguyên lỗi được hiểu là Biểu định kiểu nhưng được chuyển bằng văn bản / html loại MIME :

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

Tôi đã phải đối mặt với vấn đề tương tự. Và khám phá các giải pháp trong trang Stack Overflow tuyệt vời này.

Phản hồi của user54861 ​​(tên không khớp trong trường hợp nhạy cảm) khiến tôi tò mò kiểm tra lại mã của mình và nhận ra rằng " Tôi đã không tải lên hai tệp js mà tôi đã tải chúng trong thẻ head ". :-)

Khi tôi tải chúng lên, vấn đề sẽ biến mất! Và mã chạy và kết xuất trang mà không có bất kỳ lỗi nào khác!

Vì vậy, đạo đức của câu chuyện là đừng quên đảm bảo rằng tất cả các tệp js của bạn được tải lên nơi trang đang tìm kiếm chúng.

Tôi đã gặp vấn đề tương tự với một ứng dụng .NET, một nguồn mở CMS có tên MojoPortal. Trong một trong những chủ đề và giao diện của tôi cho một trang web cụ thể, khi duyệt hoặc kiểm tra, nó sẽ hoạt động và chậm lại như bị nghẹt thở.

Vấn đề của tôi không phải là thuộc tính "loại" cho CSS mà là "thứ khác". Thay đổi chính xác của tôi là trong Web.Config . Tôi đã thay đổi tất cả các giá trị thành FALSE cho MinifyCSS, CacheCssOnserver và CacheCSSinBrowser.

Khi đã được thiết lập, trang web đã được tăng tốc một lần nữa trong sản xuất.

Có cùng một lỗi vì tôi quên gửi tiêu đề chính xác trước

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

Sử dụng ReactJs, khi tôi thêm tệp kiểu vào index.html bằng liên kết tương đối, chẳng hạn như

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

và sau đó tôi điều hướng đến một tuyến đường nói; localhost:3000/artistvà làm mới, tôi nhận được lỗi.

Lỗi biến mất sau khi tôi thay thế liên kết tương đối bằng một liên kết tuyệt đối nói;

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

Tôi gặp phải vấn đề này khi tải CSS cho mô-đun bố trí React mà tôi đã cài đặt với npm. Bạn phải nhập hai tệp .css để chạy mô-đun này, vì vậy ban đầu tôi đã nhập chúng như thế này:

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

nhưng phát hiện ra rằng phần mở rộng tập tin phải được loại bỏ, vì vậy điều này đã làm việc:

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

Nếu nodejs và sử dụng express mã dưới đây hoạt động ...

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

Tôi có cùng một vấn đề chính xác và sau vài phút đánh lừa tôi đã giải mã rằng tôi đã bỏ lỡ để thêm phần mở rộng tập tin vào tiêu đề của mình. vì vậy tôi đã thay đổi dòng sau:

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

đến

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

Tôi đã bắt đầu gặp sự cố ngày hôm nay chỉ trên chrome chứ không phải safari cho cùng một dự án / url cho vùng chứa goormide của tôi (node.js)

Sau khi thử một số đề xuất ở trên mà dường như không hoạt động và quay lại một số thay đổi mã tôi đã thực hiện từ hôm qua đến hôm nay, điều này cũng không có gì khác biệt, tôi đã kết thúc bằng cách cài đặt chrome:

1.Cài đặt;

2.scroll xuống dưới cùng, chọn: "Nâng cao";

3. ghi xuống dưới cùng, chọn: "Khôi phục cài đặt về mặc định ban đầu của chúng";

Điều đó dường như đã khắc phục vấn đề vì tôi không còn nhận được cảnh báo / lỗi trong bảng điều khiển và trang hiển thị như bình thường. Đọc các bài viết ở trên, có vẻ như vấn đề có thể xảy ra từ bất kỳ số nguồn nào, do đó, thiết lập lại cài đặt là một sửa chữa chung tiềm năng. Chúc mừng

Nếu bạn đang phục vụ ứng dụng trong prod, hãy đảm bảo rằng bạn đang phục vụ các tệp tĩnh với nhân viên dịch vụ. Tôi đã gặp lỗi này khi tôi chỉ phục vụ thư mục con tĩnh của bản dựng React trên Django (không có tài sản có kiểu dáng)

Sử dụng React

Tôi đã gặp lỗi này trong ứng dụng hồ sơ phản ứng của tôi. Ứng dụng của tôi hoạt động giống như nó đang cố tham chiếu một url không tồn tại. Tôi tin rằng điều này có liên quan đến cách thức hoạt động của webpack.

Nếu bạn đang liên kết các tệp trong thư mục công cộng, bạn phải nhớ sử dụng% PUBLIC_URL% trước tài nguyên như thế này:

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