스타일 시트로 해석되었지만 MIME 유형 text / html로 전송 된 자원 (웹 서버와 관련이없는 것으로 간주 됨)

이 문제가 있습니다. Chrome은이 오류를 계속 반환합니다

스타일 시트로 해석되었지만 MIME 유형 text / html로 전송 된 자원

이 오류의 영향을받는 파일은 선택된 스타일과 jquery-gentleselect입니다 (같은 방식으로 색인에서 가져온 다른 CSS 파일은 오류없이 잘 작동 함). 이미 MIME 유형을 확인했으며 text / css가 이미 CSS에 있습니다.

솔직히 나는 문제를 이해하는 것으로 시작하고 싶습니다 (혼자서 할 수없는 것).

문제를 이해하면서 시작하고 싶습니다

브라우저는 서버에 HTTP 요청을합니다. 그런 다음 서버는 HTTP 응답을합니다.

요청과 응답은 모두 많은 헤더와 일부 내용이 포함 된 (선택적) 본문으로 구성됩니다.

본문이있는 경우 본문 중 하나 Content-Type를 설명 하는 헤더 중 하나입니다 (HTML 문서입니까? 이미지입니까? 양식 제출 내용입니까?).

스타일 시트를 요청하면 서버가 브라우저 Content-Type: text/html에 스타일 시트 ( Content-Type: text/css) 대신 HTML 문서 ( ) 임을 알려줍니다 .

이미 myme.type을 확인했으며 text / css가 이미 CSS에 있습니다.

그런 다음 서버에 대한 다른 스타일로 해당 스타일 시트에 잘못된 내용 유형이 제공됩니다.

브라우저 개발자 도구의 넷 탭을 사용하여 요청 및 응답을 검사하십시오.

Angular를 사용하십니까?

이것은 기억해야 할 매우 중요한 경고입니다.

기본 태그는 머리뿐만 아니라 올바른 위치에 있어야합니다.

머리에 잘못된 위치에 기본 태그가 있었고 URL 요청이있는 태그 앞에 와야합니다. 기본적으로 제목 아래에 두 번째 태그로 배치하면 문제가 해결되었습니다.

<base href="/">

여기 에 작은 글을 썼습니다

나는 또한이 오류에 문제가 있었고 해결책을 찾았습니다. 이것은 오류가 발생한 이유를 설명하지 않지만 경우에 따라 수정하는 것 같습니다.

CSS 파일 경로 앞에 슬래시 ( /) 를 포함 시키십시오.

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

내 문제는이 게시물의 모든 답변보다 간단했습니다.

정적 콘텐츠를 포함하도록 IIS를 설정해야했습니다.

이 시도 <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

##.CSS 파일은 어디에 있습니까?

잊지 마세요 : ..(더블 도트).

익명 인증 자격 증명을 응용 프로그램 풀 ID 로 설정하면 속임수가되었습니다.

나는 또한 같은 문제에 직면했다. 그리고 일부 R & D를 수행 한 후 파일 이름에 문제가 있음을 발견했습니다. 실제 파일의 이름은 "lightgallery.css" 이지만 링크하는 동안 "lightGallery.css"를 입력했습니다 .

더 많은 정보:

내 로컬 호스트 (OS : Windows 8.1 & Server : Apache)에서 잘 작동했습니다. 그러나 응용 프로그램을 원격 서버 (로컬 호스트와 다른 OS 및 웹 서버)에 업로드했을 때 작동하지 않아서 귀하와 동일한 오류가 발생했습니다.

따라서 문제는 서버의 대소 문자 구분 (파일 이름 관련)이었습니다.

다른 답변에 따르면이 메시지에는 많은 원인이있는 것처럼 보입니다. 향후에 누군가 내 정확한 문제가있는 경우를 대비하여 개별 솔루션을 공유한다고 생각했습니다.

Google 사이트는 S3 버킷을 오리진으로 사용하는 AWS Cloudfront 배포에서 CSS 파일을로드합니다. 이 특정 S3 버킷은 Jenkins를 실행하는 Linux 서버와 동기화 된 상태로 유지되었습니다. sync를 통해 명령 s3cmd세트를 자동으로 OS의 말씀에 따라 S3 객체의 내용 유형 (아마도 파일 확장자 기준). 어떤 이유로 든 우리 서버에서 .css파일을 제외한 모든 유형이 올바르게 설정되어 유형이 지정되었습니다 text/plain. S3에서는 파일 속성에서 메타 데이터를 확인할 때 원하는대로 유형을 설정할 수 있습니다. text/css사이트에서 파일을 CSS로 올바르게 해석하고 올바르게로드 할 수 있도록 설정 합니다.

nginx로 정적 CSS를 제공하는 경우 추가해야합니다

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

또는

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

nginx conf로

@Rob Sedgwick의 답변으로 포인터를 얻었지만 내 경우에는 내 응용 프로그램이 Spring Boot Application 이었습니다. 그래서 방금 보안 구성에 관련 파일의 경로에 대한 제외를 추가했습니다 ...

참고-이 솔루션은 SpringBoot 기반입니다 ... 사용중인 프로그래밍 언어 및 / 또는 사용중인 프레임 워크에 따라 수행해야 할 사항이 다를 수 있습니다.

그러나 주목할 점은 다음과 같습니다.

기본적으로 정적 컨텐츠 요청을 포함한 모든 요청이 인증 될 때 문제가 발생할 수 있습니다.

오류를 일으킨 정적 콘텐츠의 경로는 다음과 같습니다.

"플러그인"이라는 경로

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

그리고 "페이지"라는 경로

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

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

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

그런 다음 Spring Boot 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
    }

}

건배!

각도 사용

내 경우에는 ng-href대신 사용하여 href나를 위해 해결했습니다.

노트 :

백엔드로 laravel을 사용하고 있습니다.

나는 예쁜 URL을 만들기 위해 같은 .htaccess 파일과 같은 것을 직면하고있었습니다. 몇 시간 동안 둘러보고 실험 한 후 파일이 상대적으로 연결되어 있기 때문에 오류가 발생했습니다.

서버는 서버에 몇 단계 깊숙이 들어가면 모든 CSS, js 및 이미지 파일에 대해 동일한 소스 html 파일을 가져 오기 시작합니다.

이를 막기 <base>위해 HTML 소스 에서 태그를 사용할 수 있습니다 .

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

다음과 같은 파일에 연결

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

또는 모든 파일에 대해 절대 링크를 사용하십시오.

<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에있는 경우이 문제점은 서블릿 맵핑에서 발생할 수 있습니다. 매핑이 다음과 같이 defaut에 의해 URL을 가져 오는 경우 :

@WebServlet("/")

그런 다음 컨테이너는 CSS URL을 해석하고 CSS 파일로 이동하는 대신 서블릿으로 이동합니다.

나는 같은 문제가 있었고, 나는 매핑을 변경했으며 이제는 모든 작업이 작동합니다.

양식 인증을 사용하는 MVC4에서도 비슷한 문제가 있습니다. 문제는 web.config 의이 줄이었습니다.

<modules runAllManagedModulesForAllRequests="true">

이는 정적 컨텐츠 요청을 포함한 모든 요청이 인증됨을 의미합니다.

이 줄을 다음과 같이 변경하십시오.

<modules runAllManagedModulesForAllRequests="false">

나는 또한 최근 크롬 에서이 문제에 직면 해있다 . CSS 파일 문제 해결의 절대 경로를 제공합니다.

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

OP에서 Todd R의 포인트를 확장하고 싶습니다. asp.net 페이지에서 web.config파일은 응용 프로그램의 각 파일 또는 폴더에 액세스하는 데 필요한 권한을 정의합니다. 우리의 경우 CSS 파일 폴더는 권한이없는 사용자의 액세스를 허용하지 않아서 사용자가 권한을 부여하기 전에 로그인 페이지에서 실패했습니다. 권한이 web.config없는 사용자가 CSS 파일에 액세스 할 수 있도록 필요한 권한을 변경하면 이 문제가 해결되었습니다.

누군가이 게시물에 와서 비슷한 문제가있는 경우. 방금 비슷한 문제가 발생했지만 솔루션은 매우 간단했습니다.

개발자가 실수로 web.config 사본을 CSS 디렉토리에 놓았습니다. 삭제되면 모든 오류가 해결되고 페이지가 올바르게 표시됩니다.

오래된 MEAN 스택 프로젝트에 대한 작업을 다시 시작하면서 동일한 문제가 발생했습니다. nodemon로컬 개발 서버 로 사용 하고 있는데 같은 오류가 발생했습니다 Resource interpreted as stylesheet but transferred with MIME type text/html. 나는 변경 nodemon을 http-server찾을 수있는 이곳 . 그것은 즉시 나를 위해 일했습니다.

서버 페이지에 대해 컨텐츠 유형을 text / css 대신 text / html로 설정해야하기 때문입니다 (php, node.js 등).

Google CDN에서 제공하는 CSS 스타일 시트의 CSS 링크에서 프로토콜을 제거했을 때 발생했습니다.

오류가 발생하지 않습니다.

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

그러나 이것은 리소스가 스타일 시트로 해석되었지만 MIME 유형 text / html로 전송되었다는 오류를 제공합니다 .

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

나는 비슷한 문제에 직면했다. 이 환상적인 스택 오버플로 페이지에서 솔루션 탐색.

user54861의 응답 (대소 문자 구분에 이름이 일치하지 않음)을 사용하면 코드를 다시 검사하여 " 헤드 태그에로드 한 두 개의 js 파일을 업로드 하지 않았습니다" 라는 것을 알게 되었습니다 . :-)

내가 업로드하면 문제가 해결됩니다! 그리고 다른 오류없이 코드가 실행되고 페이지가 렌더링됩니다!

따라서 이야기의 도덕은 모든 js 파일이 페이지가 찾고있는 위치에 업로드되었는지 확인하는 것을 잊지 마십시오.

MojoPortal이라는 CMS 오픈 소스 인 .NET 응용 프로그램과 동일한 문제가 발생했습니다. 특정 사이트에 대한 내 테마와 스킨 중 하나에서 탐색하거나 테스트 할 때 질식하는 것처럼 느리고 느려질 수 있습니다.

내 문제는 CSS의 "type"속성이 아니라 "다른 것"이었습니다. 정확한 변경은 Web.Config 입니다. MinifyCSS, CacheCssOnserver 및 CacheCSSinBrowser에 대한 모든 값을 FALSE로 변경했습니다.

일단 설정되면 웹 사이트는 다시 한 번 생산 속도가 빨라졌습니다.

올바른 헤더를 먼저 보내는 것을 잊었 기 때문에 동일한 오류가 발생했습니다.

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

ReactJs를 사용하여 다음과 같은 상대 링크를 사용하여 index.html에 스타일 파일을 추가 할 때

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

그런 다음 경로 말하기로 이동합니다. localhost:3000/artist새로 고침하면 오류가 발생합니다.

상대 링크를 절대 링크 say로 바꾸면 오류가 사라졌습니다.

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

npm과 함께 설치 한 React 레이아웃 모듈의 CSS를로드 할 때이 문제가 발생했습니다. 이 모듈을 실행하려면 두 개의 .css 파일을 가져와야하므로 처음에 다음과 같이 가져 왔습니다.

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

그러나 파일 확장자를 삭제해야한다는 것을 알았으므로 다음과 같이 작동했습니다.

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

경우 nodejs 및 사용은 표현 코드 작품 아래에 ...

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

나는 똑같은 정확한 문제를 겪고 몇 분 동안 장난을 치면 헤더에 파일 확장자를 추가하는 것을 놓쳤다는 것을 해독했습니다. 그래서 다음 줄을 변경했습니다.

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

에

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

나는 오늘 goormide 컨테이너 (node.js)의 동일한 프로젝트 / URL에 대해 사파리가 아닌 크롬에서만 문제를 시작했습니다.

어제에서 오늘까지 변경 한 코드 변경 사항에 대해 위의 몇 가지 제안을 시도하고 역 추적 한 후에도 크롬 설정에서 아무런 차이가 없었습니다.

1. 설정;

2. 아래로 스크롤하여 "Advanced"를 선택하십시오.

3. 아래로 스크롤하여 "설정을 원래 기본값으로 복원"을 선택하십시오.

더 이상 콘솔에 경고 / 오류가 표시되지 않고 페이지가 정상적으로 표시되므로 문제가 해결 된 것으로 보입니다. 위의 게시물을 읽으면 여러 소스에서 문제가 발생할 수 있으므로 설정 재설정이 일반적인 수정 사항입니다. 건배

prod에서 앱을 제공하는 경우 서비스 워커와 함께 정적 파일을 제공하는지 확인하십시오. Django에서 React 빌드의 정적 하위 폴더 만 제공 할 때이 스타일 오류가 발생했습니다 (스타일이있는 자산 제외)

반응 사용

반응 프로필 앱에서이 오류가 발생했습니다. 내 앱이 존재하지 않는 URL을 참조하려고하는 것처럼 작동했습니다. 나는 이것이 webpack의 동작과 관련이 있다고 생각합니다.

공용 폴더에있는 파일을 연결하는 경우 다음과 같이 리소스 앞에 % PUBLIC_URL %을 사용해야합니다.

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