MIME 유형 불일치로 인해 리소스가 차단됨 (X-Content-Type-Options : nosniff)

JavaScript 및 HTML을 사용하여 웹 페이지를 개발 중입니다. HTML 페이지에서 다음 오류 목록을 받았을 때 모든 것이 잘 작동했습니다.

The resource from “https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

이러한 오류는 자동 브라우저 업데이트 (Mozilla Firefox) 후에 나타 났으며 설정에서 변경된 것일 수 있습니다. 이 문제를 해결할 방법을 알고 있습니까?

파일 경로가 정확하고 파일이 존재하는지 확인하십시오. 제 경우에는 문제가있었습니다. 제가 고쳤을 때 오류가 사라졌습니다.

URL을 변경하면 문제를 해결할 수 있습니다. 예 :

https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8

좋은 예 :

https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8

rawgit.com 은 github 용 캐싱 프록시 서비스입니다. 거기에 가서 원래 raw.githubusercontent.com URL에 해당하는 URL을 대화식으로 파생시킬 수도 있습니다 . FAQ 보기

devops 팀이 .NET Framework를 추가하여 웹 서버 구성을 변경 한 후 프로덕션에서이 오류가 발생하기 시작했습니다 X-Content-Type-Options: nosniff. 이로 인해 브라우저는 content-type응답 헤더의 매개 변수 에서 언급 한대로 리소스를 해석해야했습니다 .

이제 처음부터 애플리케이션 서버는 js 파일의 콘텐츠 유형을 text/plain. X-Content-Type-Options: nosniff는 웹 서버에 설정되지 않았기 때문에 콘텐츠 유형이 text / plain으로 언급되었지만 브라우저는 js 파일을 JavaScript 파일로 자동 해석했습니다. 이를 MIME 스니핑이라고합니다. 이제 X-Content-Type-Options : nosniff를 설정 한 후 브라우저는 MIME 스니핑을 수행하지 않고 응답 헤더에 언급 된대로 콘텐츠 유형을 취해야합니다. 이로 인해 js 파일을 일반 텍스트 파일로 해석하고 실행을 거부하거나 차단했습니다. 오류에도 동일하게 표시됩니다.

해결책 : 서버 content-type가 JS 파일을 다음과 같이 설정하도록하는 것 입니다.

application/javascript;charset=utf-8

이렇게하면 모든 JS 파일이 정상적으로로드되고 문제가 해결됩니다.

경로를 확인하십시오.이 오류는 파일이 주어진 경로에 존재하지 않으면 발생합니다.

Express를 사용하고 있습니까?

경로를 확인하십시오 ( // public / 뒤 의 " "에 유의하십시오 ) :

app.use(express.static(__dirname + "/public/"));

// 참고 : 위에 이미 포함되어 있으므로 "css"앞에 "/"가 필요하지 않습니다.

rel="stylesheet" href="css/style.css

도움이 되었기를 바랍니다

Wordpress 용

제 경우에는 get_template_directory_uri () 뒤에 슬래시 "/"를 놓쳤으므로 결과 / 생성 된 경로가 잘못되었습니다.

My Wrong code :

wp_enqueue_script( 'retina-js', get_template_directory_uri().'js/retina.min.js' ); 

내 수정 된 코드 :

wp_enqueue_script( 'retina-js', get_template_directory_uri().'/js/retina.min.js' );

브라우저가 파일에 액세스 할 수 없기 때문일 수 있습니다. node.js로 응용 프로그램을 만들 때 이러한 유형의 오류가 발생했습니다. 스크립트 파일 (URL 복사 및 붙여 넣기)을 직접 요청하고 검색 할 수 있는지 확인할 수 있습니다. 그러면 진짜 문제가 무엇인지 알 수 있습니다. 파일이있는 폴더의 권한 때문이거나 브라우저가 잘못된 경로로 인해 파일을 찾을 수 없기 때문일 수 있습니다. node.js에서 파일에 대한 경로를 지정한 후 모두 작동합니다.

잘못된 경로 일 수 있습니다. 기본 앱 파일에 다음이 있는지 확인하십시오.

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

CSS에 대한 예제 링크 :

<link href="/css/clean-blog.min.css" rel="stylesheet">

js 파일에 대한 링크와 유사합니다.

<script src="/js/clean-blog.min.js"></script>

js 파일의 문자 집합을 BOM이없는 UTF-8에서 메모장 ++의 간단한 UTF-8로 변경하여이 문제를 해결했습니다.

Azure Storage를 정적 웹 사이트로 사용할 때이 오류가 발생했습니다. 복사 된 js 파일의 콘텐츠 형식은 다음 text/plain; charset=utf-8과 같 으며 콘텐츠 형식을 다음 과 같이 변경했습니다.application/javascript

작동하기 시작했습니다.

HTTPS 및 HTTP 프로토콜은 참조

때때로 혼합 프로토콜을 사용하는 경우 [이것은 주로 JSONP 콜백에서 발생 함]이 오류가 발생할 수 있습니다.

웹 페이지와 리소스 페이지의 HTTP 프로토콜이 동일한 지 확인하십시오.

나는 또한 django 서버 에서이 같은 문제에 직면 해 있습니다. 그래서 settings.py 파일에서 DEBUG = True를 변경했습니다.

잘못된 태그로 나에게 일어났습니다. 실수로 link태그에 js 파일을 추가했습니다 .

예 : (잘못된 사람)

<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.js">

에 대한 올바른 태그를 사용하여 해결되었습니다 javascript. 예:

<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

https://cdn.rawgit.com 이 종료됩니다. 따라서 대체 옵션 중 하나를 사용할 수 있습니다. JSDeliver는 사용할 수있는 무료 CDN입니다.

// 모든 GitHub 릴리스, 커밋 또는 분기로드

// 참고 : 지원하는 프로젝트에는 npm을 사용하는 것이 좋습니다.

https://cdn.jsdelivr.net/gh/user/repo@version/file

// jQuery v3.2.1로드

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

// 특정 버전 대신 버전 범위 사용

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// 최신 버전을 얻으려면 버전을 완전히 생략

// 프로덕션에서 사용해서는 안됩니다.

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// 축소 된 버전을 얻기 위해 JS / CSS 파일에 ".min"을 추가합니다.

// 존재하지 않는 경우 생성합니다.

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// 디렉토리 목록을 얻기 위해 끝에 /를 추가합니다.

https://cdn.jsdelivr.net/gh/jquery/jquery/

ref- https: //www.jsdelivr.com/?docs= gh