스타일시트로 해석되지만 MIME 형식의 텍스트/html로 전송된 리소스(웹 서버와 관련이 없는 것으로 보임)
저한테 문제가 생겼어요.Chrome이 계속해서 이 오류를 반환합니다.
스타일시트로 해석되지만 MIME 유형 텍스트/html을 사용하여 전송된 리소스
이 오류의 영향을 받는 파일은 Style, choosed 및 jquery-gentlese(같은 방식으로 인덱스로 가져온 다른 CSS 파일)뿐입니다.제 MIME 타입을 이미 확인했고 텍스트/CSS는 이미 CSS에 있습니다.
솔직히 저는 그 문제(혼자서는 할 수 없을 것 같은 일)를 이해하는 것부터 시작하고 싶습니다.
저는 그 문제를 이해하는 것부터 시작하고 싶습니다.
브라우저는 서버에 HTTP 요청을 합니다.그러면 서버는 HTTP 응답을 합니다.
요청과 응답 모두 머리글과 일부 내용이 포함된 (때로는 선택적인) 본문으로 구성됩니다.
만약 본체가 있다면, 헤더들 중 하나입니다.Content-Type본문이 무엇인지 설명합니다. (HTML 문서입니까?이미지? 양식 제출 내용양식 제출 내용은?등).
스타일시트를 요청하면 서버가 브라우저에 HTML 문서임을 알려줍니다.Content-Type: text/html) 스타일시트 대신(Content-Type: text/css).
나는 이미 myme.type을 확인했고 text/css는 이미 css에 있습니다.
그러면 서버의 다른 점이 해당 스타일시트에 잘못된 콘텐츠 유형이 포함되도록 만들고 있는 것입니다.
브라우저의 개발자 도구의 Net(넷) 탭을 사용하여 요청 및 응답을 검토합니다.
각도 사용?
이것은 기억해야 할 매우 중요한 주의사항입니다.
기본 태그는 머리에만 있는 것이 아니라 올바른 위치에 있어야 합니다.
기본 태그를 머리에 잘못 입력했습니다. URL 요청이 있는 태그보다 먼저 와야 합니다.기본적으로 제목 밑에 두 번째 태그로 배치하면 해결됩니다.
<base href="/">
여기에 작은 글을 썼습니다.
저도 이 오류로 문제가 생겨 해결책을 찾았습니다.이는 오류가 발생한 이유를 설명하지는 않지만 경우에 따라 수정되는 것으로 보입니다.
다음과 같이 css 파일 경로 전에 forward slash /를 포함합니다.
<link rel="stylesheet" href="/css/bootstrap.min.css">
제 문제는 이 게시물의 모든 답변보다 간단했습니다.
정적인 내용을 포함하도록 IIS를 설정해야 했습니다.
익명 인증 자격 증명을 응용 프로그램 풀 ID로 설정하면 효과가 있습니다.
이거 먹어봐요.<link rel="stylesheet" type="text/css" href="../##/yourcss.css">
어디에##는 당신의 폴더입니다. - 파일 -
다음 사항을 잊지 마십시오...(두 개의 점).
저 역시 같은 문제에 직면해 있었습니다.그리고 R&D를 좀 해본 결과 파일명에 문제가 있다는 것을 알게 되었습니다.실제 파일의 이름은 lightgallery.css였는데 링크를 하면서 lightgallery.css라고 입력했습니다.
추가 정보:
로컬 호스트(OS: Windows 8.1 및 서버: Apache)에서 잘 작동했습니다.하지만 원격 서버(로컬 호스트와 다른 OS & 웹 서버)에 애플리케이션을 업로드했을 때 작동하지 않아 귀하의 것과 동일한 오류가 발생했습니다.
따라서 문제는 서버의 대소문자 구분(파일 이름과 관련)이었습니다.
정적 CSS를 nginx와 함께 제공하는 경우 추가해야 합니다.
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;
}
tonginxconf
다른 답변들로 미루어 볼 때, 이 메시지는 많은 원인이 있는 것 같습니다. 저는 나중에 누군가가 제 정확한 문제를 가지고 있을 경우를 대비하여 제 개인의 해결책을 공유하려고 생각했습니다.
우리 사이트는 S3 버킷을 원본으로 사용하는 AWS Cloudfront 배포판에서 CSS 파일을 로드합니다.이 특정 S3 버킷은 Jenkins를 실행하는 Linux 서버에 동기화되어 있었습니다.sync명령어 경유s3cmd는 OS에서 말하는 내용(아마도 파일 확장명을 기준으로)에 따라 S3 개체에 대한 Content-Type을 자동으로 설정합니다.어떤 이유에서인지 우리 서버에서는 모든 타입이 정확하게 설정되어 있었습니다..css파일들, 그것이 제공한 유형은.text/plain할 수 S3에서는 파일의 속성에서 메타데이터를 확인할 때 원하는 대로 유형을 설정할 수 있습니다.설정하기text/css우리 사이트가 파일을 CSS로 올바르게 해석하고 올바르게 로드할 수 있도록 했습니다.
@Rob Sedgwick의 대답은 나에게 포인터를 주었지만, 나의 경우 내 앱은 Spring Boot Application이었습니다.그래서 방금 보안 구성에 관련 파일의 경로에 대한 제외사항을 추가했습니다.
참고 - 이 솔루션은 SpringBoot 기반입니다...사용 중인 프로그래밍 언어 및/또는 사용 중인 프레임워크에 따라 수행해야 할 작업이 다를 수 있습니다.
그러나 유의할 점은;
본질적으로 정적 컨텐츠에 대한 요청을 포함한 모든 요청이 인증될 때 문제가 발생할 수 있습니다.
따라서 오류를 발생시킨 정적 컨텐츠에 대한 몇 가지 경로를 다음과 같이 가정해 보겠습니다.
"플러그인" 이라는 경로.
http://localhost:8080/플러그인/스타일스/css/file-1
그리고 '페이지'라고 불리는 경로.
http://localhost:8080/페이지/스타일/css/style-1
그런 다음 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
}
}
이 경로 제외
"/plugins/**"그리고."/pages/**"인증으로 인해 오류가 사라졌습니다.
건배!
각도 사용
나의 경우는ng-href대신에href해결해 줬습니다.
참고:
저는 라라벨을 백엔드로 작업하고 있습니다.
JSP를 사용하는 경우 이 문제는 서블릿 매핑에서 발생할 수 있습니다.매핑이 다음과 같이 기본값으로 url을 사용하는 경우
@WebServlet("/")
그러면 컨테이너가 당신의 cs url을 해석하고 cs 파일로 가지 않고 servlet으로 갑니다.
나는 같은 문제가 있었습니다. 나는 지도를 바꿨고 지금은 모든 것이 작동합니다.
나는 몇 시간 동안 주위를 둘러보고 실험한 후에 예쁜 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" />
양식 인증을 이용한 MVC4에서도 비슷한 문제가 있습니다.문제는 web.config의 이 행이었습니다.
<modules runAllManagedModulesForAllRequests="true">
즉, 정적 컨텐츠에 대한 요청을 포함한 모든 요청이 인증됨을 의미합니다.
이 줄을 다음으로 변경합니다.
<modules runAllManagedModulesForAllRequests="false">
저도 최근 크롬에서 이 문제에 직면했습니다.나는 단지 내 CSS 파일 문제 해결에 절대적인 경로를 제공합니다.
<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />
이 문제를 가지고 있을 수 있는 모든 사람들에게.PHP에서 커스텀 MVC를 만들고 있을 때 이 문제가 발생했습니다.
제 자산(css/js/images) 파일을 절대 경로로 설정하여 이 문제를 해결할 수 있었습니다.href=" css/style. css"과 같은 URL을 사용하지 않고 현재 전체 URL을 사용하여 로드합니다.예를 들어, http://example.com/user/5, 에 있는 경우 http://example.com/user/5/css/style.css 에 로드하려고 합니다.
이를 수정하려면 자산의 URL 시작 부분에 /를 추가할 수 있습니다(예: href="/ css/style. css").이렇게 하면 브라우저가 url의 루트에서 로드하도록 지시합니다.이 예에서는 http://example.com/css/style.css 을 로드하려고 합니다.
이 댓글이 도움이 되길 바랍니다.
서버 페이지(php, node.js 등)에 대해 text/css가 아닌 text/html로 컨텐츠 유형을 설정해야 하기 때문입니다.
나는 OP에서 Todd R의 요점을 확대하고 싶습니다.t 에서,web.config파일은 응용프로그램의 각 파일 또는 폴더에 액세스하는 데 필요한 권한을 정의합니다.우리의 경우 CSS 파일의 폴더가 권한이 없는 사용자의 접근을 허용하지 않아 사용자가 권한을 부여받기 전 로그인 페이지에서 장애가 발생했습니다.에서 필요한 권한 변경web.config허가받지 않은 사용자가 CSS 파일에 접근할 수 있도록 허용하고 이 문제를 해결했습니다.
저도 똑같은 문제를 가지고 있는데 몇 분 동안 빈둥거리다가 파일 확장자를 헤더에 추가하는 것을 놓쳤다는 것을 이해했습니다.그래서 저는 다음 줄을 바꿨습니다.
<link uic-remove rel="stylesheet" href="css/bahblahblah">
로.
<link uic-remove rel="stylesheet" href="css/bahblahblah.css">
반응 사용
제 반응 프로필 앱에서 이 오류를 발견했습니다.제 앱은 존재하지 않는 URL을 참조하려는 것처럼 행동했습니다.저는 이것이 웹팩이 어떻게 행동하는지와 관련이 있다고 생각합니다.
공용 폴더의 파일을 연결하는 경우 다음과 같은 리소스를 사용하기 전에 %PUBLIC_URL%를 사용해야 합니다.
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css" />
만약 누군가 이 게시물에 와서 비슷한 문제가 있을 경우.방금 비슷한 문제를 겪었지만 해결 방법은 꽤 간단했습니다.
한 개발자가 실수로 web.config의 복사본을 CSS 디렉토리에 빠뜨렸습니다.삭제하면 모든 오류가 해결되고 페이지가 올바르게 표시됩니다.
예전 MEAN 스택 프로젝트 작업을 재개하던 중에 같은 문제를 발견했습니다.사용하고 있었습니다.nodemon나의 지역 개발 서버로 같은 오류가 발생했습니다.Resource interpreted as stylesheet but transferred with MIME type text/html. 나는 에서 바꼈습니다.nodemon.http-server여기서 찾을 수 있습니다.그것은 저에게 즉시 효과가 있었습니다.
이것은 내가 구글 CDN에서 제공하는 CSS 스타일시트에 대한 css 링크에서 프로토콜을 제거했을 때 발생했습니다.
이렇게 하면 오류가 없습니다.
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">
그러나 이렇게 되면 리소스가 Stylesheet로 해석되지만 MIME type text/html로 전송됩니다.
<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">
저도 비슷한 문제에 직면해 있었습니다.그리고 이 환상적인 스택 오버플로 페이지에서 솔루션을 탐색합니다.
user54861의 응답(대개 민감도의 경우 이름이 일치하지 않음)으로 인해 코드를 다시 검사하는 것이 궁금해지고 "헤드태그에 로드한 js 파일 2개를 업로드하지 않았습니다. :-)
제가 업로드 했을 때 이슈가 사라집니다! 그리고 코드 실행과 페이지 렌더링이 다른 오류 없이 진행됩니다!
따라서, 이 이야기의 도덕성은 페이지가 찾는 곳에 모든 js 파일이 업로드되도록 하는 것을 잊지 말아야 합니다.
저도 같은 문제를 발견했습니다.MojoPortal이라는 CMS 오픈 소스인 NET 어플리케이션입니다.특정 사이트의 테마 및 스킨 중 하나에서 검색하거나 테스트할 때 목이 메는 것처럼 분쇄되고 속도가 느려집니다.
제 문제는 CSS에 대한 "유형" 속성이 아니라 "다른 것"이었습니다.저의 정확한 변화는 웹에 있었습니다.구성.Minify를 위해 모든 값을 FALSE로 변경했습니다.브라우저의 CSS, CacheCssOn서버 및 CacheCSS.
일단 그것이 정해지자 웹사이트는 다시 한번 제작에 속도를 내게 되었습니다.
처음에 정확한 헤더를 보내는 것을 잊어버려서 같은 오류가 있었습니다.
header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';
npm으로 설치한 리액트 레이아웃 모듈용 CSS를 로드할 때 이 문제가 발생했습니다.이 모듈을 실행하려면 .css 파일을 두 개 가져와야 하므로 처음에는 다음과 같이 가져왔습니다.
@import "../../../../node_modules/react-grid-layout/css/styles.css";
하지만 파일 확장자를 삭제해야 한다는 것을 알게 되었고, 이것은 효과가 있었습니다:
@import "../../../../node_modules/react-grid-layout/css/styles";
nodejs와 express를 사용하는 것이 아래 코드에서 작동한다면...
res.set('Content-Type', 'text/css');
오늘부터 크롬에서만 문제가 발생하기 시작했고, 내 goomide 컨테이너(node.js)에 대해 동일한 프로젝트/url에 대해 사파리가 발생하지 않았습니다.
작동하지 않는 것처럼 보이는 위의 몇 가지 제안을 시도하고 어제부터 오늘까지 제가 한 일부 코드 변경 사항을 역추적한 결과, 저는 크롬 설정을 클릭하게 되었습니다.
1.설정;
2. 아래쪽으로 스크롤하여 "Advanced"(고급)을 선택합니다.
3.아래로 스크롤하여 "설정을 원래 기본값으로 복원"을 선택합니다.
콘솔에 더 이상 경고/오류가 표시되지 않고 페이지가 표시되기 때문에 문제가 해결된 것으로 보입니다.위의 게시물을 읽어보면 소스 수에 상관없이 문제가 발생할 수 있으므로 설정 재설정이 일반적인 해결책이 될 수 있습니다.건배.
prod에서 앱을 제공하는 경우 서비스 작업자와 함께 정적 파일을 제공하는지 확인합니다.장고에서 리액트 빌드의 정적 하위 폴더만 제공할 때 이 오류가 발생했습니다(스타일이 있는 자산 없음).
언급URL : https://stackoverflow.com/questions/22631158/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html-see
'source' 카테고리의 다른 글
| Karaf - 최대 절전 모드 - MariaDB " 스키마 업데이트를 완료할 수 없습니다" 오류 (0) | 2023.10.27 |
|---|---|
| make로 여러 C 파일을 컴파일합니다. (0) | 2023.10.27 |
| WCF Test Client 사용과 동일하게 SOAP를 사용하여 javascript AJAX에서 하나의 프록시를 사용하는 방법 (0) | 2023.10.27 |
| 워드 프레스로 기본 날짜 형식 가져오기 (0) | 2023.10.27 |
| Oracle에서 열 값 스와핑 (0) | 2023.10.27 |