CSS 파일 차단: MIME 유형 불일치(X-Content-Type-Options:nosniff)

CSS 파일 차단: MIME 유형 불일치(X-Content-Type-Options:nosniff)

Angular 4 앱을 개발 중인데 글로벌 스타일을 적용하고 싶습니다.각도 사이트의 자습서를 따라 앱의 루트 디렉터리에 "styles.css" 파일을 만들었고, 앱의 인덱스.html에 있는 스타일시트를 참조하는 것입니다.

<link rel="stylesheet" type="text/css" href="styles.css">

각진 앱이 성공적으로 컴파일되었습니다.

$ ng serve 
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
[...]
webpack: Compiled successfully.

그러나 Chrome 브라우저에서 http://localhost:4200을 방문하면 콘솔에 오류가 표시됩니다.

GET http://localhost:4200/styles.css 

Firefox 브라우저에서는 오류가 조금 더 명확하게 나타납니다.

GET 
http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms]
The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

index.html 파일과 styles.css 파일 모두 내 angular app의 root 디렉토리에 있습니다.문제에 대한 자세한 정보를 얻으려고 했습니다.

nosniff
    Blocks a request if the requested type is

        "style" and the MIME type is not "text/css", or
        "script" and the MIME type is not a JavaScript MIME type.

를 왜안 갑니다. 왜냐하면 제가 명시했기 때문입니다.type="text/css"스타일시트를 참조할 때.

저도 방금 같은 문제에 부딪혔어요.이는 "nodejs express cs mime type"을 검색한 웹의 히트 수로 판단할 때 몇 가지 다른 이유로 나타날 수 있는 Express의 quirk으로 보입니다.

그럼에도 불구하고type="text/css"우리가 우리의 속성에 넣었습니다.<link합니다, Express는 CSS합니다.

Content-Type: "text/html; charset=utf-8"

그것은 정말로 그것을 돌려줘야만 합니다.

Content-Type: "text/css"

rel= 변경,성

<link rel="stylesheet" type="text/css" href="styles.css">

로.

<link type="text/css" href="styles.css">

테스트 결과 CSS 파일이 다운로드 되어 스타일이 실제로 작동하는 것으로 확인되었으며, 그것은 제 목적에 충분했습니다.

도 했습니다.rel = "stylesheet"는 더 . MIME .

일부 답변에서는 rel="stylesheet"을 삭제할 것을 제안했지만 저는 이를 해결하지 못했습니다.expressjs 문서에 따르면: https://expressjs.com/en/starter/static-files.html useexpress.staticCSS, 자바스크립트 등 정적 파일을 서비스하는 기능...

app.use(express.static('public'))

에 스타일 내부에 style., 입니다와 할 수 .{PROJECT_PATH}/public/css/

http://localhost:3000/css/style.css효과가 있을 겁니다

(개발 중인) 전체 스택 웹 어플리케이션에 대해 동일한 종류의 문제가 발생함에 따라, 저는 단순히 css 파일을 렌더링된 페이지에 올바르게 연결하여 문제를 해결했습니다. 제거rel = stylesheet과 같이,하지만, 해야 할 ..간단히 말해서 해결책이 아닙니다.

express-static이를 예로 들 수 있습니다.

서버측:

app.use(express.static(__dirname + "/public", {
    index: false, 
    immutable: true, 
    cacheControl: true,
    maxAge: "30d"
}));

클라이언트 측:

 <link type="text/css" rel="stylesheet" href="/main.css">

(html )을하면 됩니다.template engines ) express-static 를 합니다.

앵글 앱에서 자바스크립트 파일과 비슷한 문제가 있었습니다(CSS가 아닌).실제로 문제는 Mime 유형이 아니라 (외부 오류 메시지가 표시된 것처럼) "404 Not Found" 오류였습니다.

제 경우에는 스크립트 파일을 "assets" 폴더를 제외한 다른 곳에 두면 404가 발생하고 결국 마임 타입 오류가 발생했습니다.index.html의 헤드 섹션에는 다음 태그가 적용되었습니다.

<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>

assets 폴더는 Index.html 파일의 형제입니다.

이것으로 문제가 해결되었습니다.

app.use('/public', express.static(path.join(__dirname, "public")));

간단한 해킹은 순방향 슬래시를 추가하는 것입니다./사용된 스타일시트의 경로 앞에 위치합니다.저는 그랬습니다.href='css/style.css'로 .href='/css/style.css' 매력적으로 작동했습니다.

저도 이런 문제가 있었습니다.

스크립트 파일을 다른 위치로 이동했는데 이제 오류가 없습니다.

<script src="./scripts/simple-keyboard/keyboard.index.min.js" type="text/html"></script>
.<script src="./scripts/keyboard.index.min.js" type="text/javascript"></script>

Davelli가 언급한 것처럼, 문제는 파일 불일치가 아니라 오류가 발견되지 않았습니다.잘못된 오류를 되돌렸다니 이상하네요!

이 솔루션이 도움이 되지 않는 경우:

 app.use(express.static('public'))//for server
<link rel="stylesheet" href="/index.css">//for styles

그런 다음 루트 디렉터리에 "public" 폴더가 있는지 확인합니다.이건 제 경우에요.

저도 같은 문제에 직면해 있었습니다.하지만 저는 그것이 당신의 style.css 파일에 맞는 디렉토리를 사용하는 것과 관련이 있다는 것을 알게 되었습니다.그래서 아래 코드 라인을 시도해봤는데 완벽하게 작동했습니다.

<link rel="stylesheet" type="text/css" href="/app/scss/style.css">

제 경우에는 "css/style.css" 앞에 "/"만 포함합니다.

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

to

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

express.static('public')도 사용합니다.

내게 도움이 되는 것 같았던 것이 변화하고 있었습니다.

<script type="text/javascript" src="/lib/matrix.js"></script>

로.

<script type="text/javascript" src="./lib/matrix.js"></script>

저도 이 문제에 부딪혔습니다.저는 키란쿠마르 곤티의 팁으로 문제를 해결할 수 있었습니다.

다음 줄을 사용합니다.

app.use('/public', express.static(path.join(__dirname, "public")));

Const Path를 설정해야 합니다.

또한 CSS 폴더가 공용 폴더 안에 중첩되어 있는지 확인하려고 합니다.

저도 이 문제에 부딪혔습니다.저는 키란쿠마르 곤티의 팁으로 문제를 해결할 수 있었습니다.

app.js 파일에서 다음 코드 라인을 사용했습니다. 공용 폴더는 없지만 css 폴더에 style.css를 저장했습니다.

app.use('/css', express.static(path.join(__dirname, "css")));

사용한 /css/style.css 파일:

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

아직도 이런 오류가 있는 사람들을 위해 저는 angular.json 파일에 "src/assets"를 포함시켜 해결할 수 있었습니다.

"assets": ["src/favicon.ico", "src/assets", "src/upload.php"]

또한 인덱스의 디렉토리입니다. html는 자산에 포함되지 않아야 합니다. 즉, "assets"에 "src"를 포함하지 않아야 합니다.

같은 문제에 부딪혔는데, 몇 번 둘러본 결과 전체 디렉토리가 아니라 특정 폴더 안의 파일만 참조하면 된다는 것을 알게 되었습니다.정적 내부의 공용 루트를 참조하는 경우 예제app.use(express.static(일반의)) then you only need to ref <link rel=stylesheethref =css/styles.css전체 디렉토리가 아닌 >.

VS Code + Live 서버 사용 중 "CSS 파일 차단: MIME 유형 불일치"

VS Code에서 Live Server(또는 대안)를 사용하여 테스트하는 동안 이 오류가 발생하면 실제로 VS Code 작업장 최상위 디렉터리 설정이 잘못되어 리소스에 연결할 수 없는 경우 확장자가 CSS 파일과 함께 잘못된 마임 유형을 보내는 것처럼 보일 수 있습니다.작업영역 루트가 실제 앱의 루트 dir 위에 있는 dir로 설정되어 있으면 코딩 시 VS Code에서 쉽게 눈에 띄지 않을 수 있지만 디버깅 시 리소스가 잘못 참조됩니다.

저의 경우 아래 코드 블록들을 역순으로 뒤섞어 놓았기 때문에 이런 오류가 발생했습니다.이 문제가 있는 경우 아래의 순서를 따르시면 도움이 될 것입니다.

1.

 app.use(express.static(path.join(__dirname, 'public')));

2.

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public/index.html'));
});

3.

app.use('/api', cors(corsOptions), indexRouter);

이것이 저에게 일어난 일입니다, 제 사이트가 아카이브되어서 CSS와 js 파일을 사용할 수 없습니다.웹 호스트를 복원하고 나면 모든 것이 잘 됩니다.

그래서 URL이 맞는지 확인 부탁드립니다.

언급URL : https://stackoverflow.com/questions/44657829/css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff