크롬은“리소스는 스크립트로 해석되었지만 MIME 유형 텍스트 / 일반으로 전송되었습니다.”라고 말합니다.


316

FF와 모두에서 내 자바 스크립트가 정상적으로 작동합니다. 그러나 Chrome에서는 다음 메시지를 제공합니다.

리소스는 스크립트로 해석되지만 MIME 유형 text / plain으로 전송됩니다.

모든 스크립트 태그를 확인했으며 모두에 있습니다 MIME type="text/javascript". jquery와 jquery ui에서도 그렇게 말합니다. Chrome에 어떤 문제가 있습니까?

문제와 해결 방법은 무엇입니까? 브라우저의 '옵션'에서 변경해야합니까 아니면 서버에서 변경해야합니까, 아니면 코드를 조정해야합니까?


14
일부 코드가 도움이 될 것입니다. 거의 항상 착각 할 수 있기 때문에 아무리 유혹을 치르더라도 컴파일러 (브라우저)를 먼저 비난하지 마십시오.
msw

호기심의 문제로 html5를 사용하고 있습니까?
bollo

답변:


203

서버가 Javascript HTTP 응답을 보내는 것을 의미합니다.

Content-Type: text/plain

자바 스크립트 응답을 보내도록 서버를 구성해야합니다.

Content-Type: application/javascript

3
Weblogic Server 11g를 사용하고 있지만 MIME을 어디에 구성 할 수 있는지 잘 모르겠습니다. 제발 나에게 길을 보여줄 수 있습니까?
Shaoz

6
흠 서버가 없을 때 스크립트는 실제로 로컬 파일 시스템의 JSONP 파일입니까? 그렇다면 심각하지 않고 통제 할 수없는 경고를 무시하십시오.
hippietrail

2
그것은해야한다 content-type:application/javascript,하지만 application/x-javascript입니다 하지 RFC 또는 인 ECMAScript 표준.
Jasdeep Khalsa

비슷한 질문이 많이 있습니다. 이 답변은 나에게 쉬운 해결책이었습니다. stackoverflow.com/a/12057490/1617395
Joe Leo

@JoeLeo : IIS를위한 것입니다.
SLaks

124

이것은 jQuery 또는 클라이언트 측 스크립트 코드와 관련없습니다 . 그것은이다 서버 측 문제 : 서버 (- 측 응용 프로그램)는 HTTP 예상 전송되지 않은 Content-Type헤더 필드 는 클라이언트 측 스크립트 리소스에 대한 값입니다. 이것은 웹 서버가 불충분하게 구성, 잘못 구성되었거나 서버 측 응용 프로그램 (예 : PHP)이 클라이언트 측 스크립트 자원을 생성하는 경우에 발생합니다.

JavaScript와 같은 ECMAScript 구현에 적합한 MIME 미디어 유형은 다음과 같습니다.

  • text/javascript( 더 이상 사용되지 않는 것으로 등록되었지만 이상 사용되지 않지만 여전히 유효 하며 최상의 지원 )
  • text/ecmascript( 더 이상 사용되지 않는 것으로 등록되었지만 이상 사용되지 않지만 여전히 유효합니다 )
  • application/javascript
  • application/ecmascript

위에 나열된 MIME 미디어 유형은 현재 표준 트리에 등록 된 MIME 미디어 유형이므로을 포함 하지 않습니다application/x-javascript (따라서 더 이상 실험적인 미디어를 사용할 필요가 없으며 필요하지 않아야 함). Cf. RFC 4329, "스크립팅 미디어 유형"(2005 CE) 및 테스트 사례 : 스크립팅 미디어 유형 지원 .

한 가지 해결책은 가능하면 이미 권장 된대로 서버를 구성하는 것입니다. Apache의 경우 지시문을 추가하는 것만 큼 간단합니다.

AddType text/javascript .js

자세한 내용은 Apache HTTP Server 설명서 를 참조하십시오.

그러나 클라이언트 측 스크립트 리소스가 PHP와 같은 서버 측 응용 프로그램에서 생성 된 Content-Type경우 기본값은 다음과 같이 헤더 필드 값을 명시 적으로 설정해야합니다 text/html.

<?php
  header('Content-Type: text/javascript; charset=UTF-8');
  // ...
?>

(이와 비슷한 문장은 다른 출력보다 먼저 나와야합니다. ( PHP 매뉴얼 참조 ) 그렇지 않으면 HTTP 메시지 본문이 이미 시작된 것으로 간주되어 더 많은 헤더 필드를 보내기에는 너무 늦습니다.)

서버에 일반 .js 파일이 있거나 서버에서 주석이 제공 될 때 주석이 제거 된 경우, 하나의 큰 응답으로 묶여있는 경우 서버 쪽 생성은 클라이언트 쪽 스크립트 리소스에 쉽게 발생할 수 있습니다. 더 효율적인 요청 수) 또는 다른 방법으로 서버 측 응용 프로그램에 의해 최소화됩니다.


1
서버에 액세스 할 수 없으면 어떻게합니까?
Adonis K. Kakoulidis

1
가지고있는 사람을 찾으십시오.
PointedEars

이 설명에 감사드립니다. 너무 많은 사람들이 'JSONP 아이를 보내면 어떻게해야하는지 알 것'과 같은 건방진 말을합니다. 당신이 가진 것처럼 그것을 올바르게 설명하기 위해 시간이 걸리면, 그것은 분명합니다. 이로 인해 몇 주 동안 발생한 문제가 해결되었습니다. 다시 감사합니다!

@ Rick-777 : 변경 사항에 대해 언급하지 않고 답변을 변경하지 않아도됩니다. 내 답변을주의 깊게 읽으면 내가 왜 text/javascript이상을 추천하는지 알게 application/javascript됩니다. 당신이이 믿을만한 이유가있는 경우 application/javascript지금 더 나은 해답을, 당신이해야 할 가장은 자신을 설명하는 주석에. 변경 내용을 인식하려면 Stack Overflow의 알림 메커니즘이 필요하지 않습니다. 나는 불합리하다고 생각되는이 질문에 대한 답변으로 fudging 이라고하는 변경 사항을 되돌 렸습니다 .
PointedEars

19

Weblogic과 같은 Java 응용 프로그램 서버

1) weblogic.xml 파일에 오류가 없는지 확인하십시오

이 같은:

    <?xml version = '1.0' encoding = 'windows-1252'?>
<weblogic-web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xsi:schemaLocation="http://www.bea.com/ns/weblogic/weblogic-web-app http://www.bea.com/ns/weblogic/weblogic-web-app/1.0/weblogic-web-app.xsd"
                  xmlns="http://www.bea.com/ns/weblogic/weblogic-web-app">
    <container-descriptor>
        <prefer-web-inf-classes>true</prefer-web-inf-classes>
    </container-descriptor>
    <context-root>MyWebApp</context-root>
</weblogic-web-app>

2) java.script에 대한 MIME 유형을 web.xml 파일에 추가 하십시오.

    ...
        </servlet-mapping>

        <mime-mapping>    
            <extension>js</extension>        
            <mime-type>application/javascript</mime-type>        
        </mime-mapping>

        <welcome-file-list>
    ...

이것은 다른 Java 컨테이너에서도 작동합니다. Tomcat 등 application/javascript은 현재 유일하게 유효한 MIME 유형입니다. 다른 사람들 text/javascript은 더 이상 사용되지 않습니다.

3) 브라우저 캐시를 지우거나 CTRL-F5를 눌러야 할 수도 있습니다


7

나는이 문제가 있었고 그것을 고치는 방법을 알아 냈습니다.

스타일 (CSS) 파일이 .css 파일을 참조하는 PHP 파일과 다른 인코딩 인 경우 발생합니다.

예를 들어, Unix 인코딩에서 jQuery.js를 사용하고 UTF-8에서 index.php를 사용하면 UTF-8 또는 다른 인코딩을 동일하게 유지해야합니다.


7

PHP 파일로 자바 스크립트를 생성하는 경우 파일의 시작 부분에 이것을 추가하십시오.

<?php Header("Content-Type: application/x-javascript; charset=UTF-8"); ?>

다른 헤더를 정의한 경우 오류가 발생하지 않도록 교체하십시오.
mopsyd

1
PointedEars 게시물과 함께 이것은 응답이 없었던 문제를 해결하는 데 도움이되었으며 몇 주 동안 내 두뇌를 쌓아 두었습니다. 고마워 : D Google에 "PHP 문서에 헤더를 설정하는 방법"을 입력하면 1000 개의 잘못된 결과가 나옵니다. 어떻게 해야할지 모르겠지만 마침내 게시물을 찾았습니다.

3

아파치의 httpd.conf에서 다음 줄을 추가하십시오.

AddType application/x-javascript .js

내 " .js"항목에는 IIS 8 MIME 유형 아래에 "application / javascript"가 있습니다. " .js"항목을 "application / x-javascript"로 변경했을 때 작동했습니다! 이것은 ExtJS / ASP.NET / ExtDirect4DotNet 어플리케이션에서 시작되었습니다
MacGyver

3

나는 여기에 다른 답변보다 더 사소한 이유로이 디버그 메시지를 받았습니다. 이것은 충분한 수면을 얻지 못하고 CSS 파일의 구문을 사용하여 js 파일을 참조 할 때 수신되는 오류 메시지입니다. 에서처럼

<link rel='stylesheet' type='text/css' href='clearly_javascript.js'/>

오히려

<script src='clearly_javascript.js'></script>

여기에 오류 메시지를 검색 할 때 나타나는 첫 번째 게시물이 있기 때문에 여기에 넣었습니다.


2

이상한 문제이지만 이것이 내 문제를 해결하는 데 도움이되었습니다. 때로는 가장 쉬운 것조차 알아 내기가 어렵습니다 ...

/js/main.css스크립트 태그 를 사용하는 대신 js/main.css

, 실제로 차이를 만들었습니다. WAMP / Windows에 앉아 있는데 호스트가 없지만 방금 사용했습니다.localhost/<project>

내가 참조하면 /js/main.css참조 localhost/css/main.css하지 않고localhost/<project>/css/main.css

당신이 그것을 생각할 때, 그것은 명백합니다. 그러나 누군가 이것에 걸려 넘어지면 나는이 대답을 나눌 것이라고 생각했습니다.


1

js 파일이 실제로 서버에 있는지 확인하십시오. 이 문제가 발생하여 js 파일이 서버에 업로드되지 않았고 서버가 실제로 html 페이지를 대신 반환한다는 것을 발견했습니다. 서버에 구성된 기본 문서 (예 : default.html)


1

Joomla에서 일하고 있다면! ( .js) JavaScript 파일 을 포함하려고 할 때이 성가신 오류가 발생하면 다음 해결책이 적합합니다.

가장 가능성있는 문제는 .js 존재하지 않는 파일 을 포함 시키려고 하거나 .js파일을 잘못 배치 한 경우 및 Joomla! 리소스를 찾지 못하면 일반 404 메시지 대신 완전한 웹 페이지 및 html 등으로 본격적인 404 메시지를 반환합니다.

웹 브라우저는 .js이를 필요한 파일 을 찾을 수 없다는 웹 페이지 로 해석하고 있습니다.

이것은 작동 할 수 있습니다


1

나를 위해, 이 window.location대신 $location.url(...);내 문제를 해결 했기 때문에 일부 페이지에서만 발생했습니다 . 알아내는 데 시간이 걸렸습니다 :)


0

웹 프레임 워크를 사용하는 동안이 문제가 발생했으며 관련 자바 스크립트 파일을 지정된 (프레임 워크 별) 자바 스크립트 폴더로 이동하여 문제를 해결했습니다.


0

이런 일이 발생할 때 일반적으로하는 일은 단순히 스크립트 호출에 포함을 잊어 버린 경우 type입니다. 에 따라 - 당신은 그대로, 명시 적으로 설정해야합니다 W3 - 필요합니다 :

type(content-type) :이 속성은 요소 컨텐츠의 스크립팅 언어를 지정하고 기본 스크립팅 언어를 대체합니다. 스크립팅 언어는 컨텐츠 유형 (예 :)으로 지정됩니다 "text/javascript". 작성자는이 속성에 값을 제공해야합니다. 이 속성 에는 기본값없습니다 .

여전히 브라우저의 기본값은으로 보입니다 plain/text.

예:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>

Apache 구성에서 해당 파일 확장자의 기본값을 설정할 수도 있습니다.

<IfModule mod_mime.c>
    AddType text/javascript .js
</IfModule>

0

그 IIS 만들 경우 아래에 있는지 common HTTP Features, 당신은 Static Content켜져


0

나는 같은 오류가 있었고 마침내 (내 경우에는) 배포 설명자 (web.xml)에서 문제를 발견했습니다.

문제 :

<servlet-mapping>
    <servlet-name>SessionController</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>
...
<welcome-file-list>
    <welcome-file>/</welcome-file>
</welcome-file-list>

해결책:

<servlet-mapping>
    <servlet-name>SessionController</servlet-name>
    <url-pattern>/SessionController</url-pattern>
</servlet-mapping>
...
<welcome-file-list>
    <welcome-file>desktop.jsp</welcome-file>
</welcome-file-list>

0

Spring MVC를 사용하는 경우 다음 mvn 태그를 추가하여 Spring Dispatch Servlet에서 자원 파일을 제외시킬 수 있습니다

<mvc:resources mapping="/js/*.js" location="/js/"/>
<mvc:resources mapping="/css/*.css" location="/css/"/>
<mvc:resources mapping="/images/*.*" location="/images/"/>

0

제 경우에는 서버가 정확 Content-Type하지만 잘못 전송했습니다 Content-Encoding. Content-Encoding: gzipgzip으로 압축 된 리소스에 대해서만 설정 해야합니다. 또한 서버 (내 경우에는 Google Cloud Storage)에서 헤더를 수정 한 후 캐싱으로 인한 변경 사항을 올바르게 반영하기 위해 몇 분 기다려야했습니다.


0

AdonisJS (예 : REST API)를 사용하는 경우이를 방지하는 한 가지 방법은 다음과 같이 응답 헤더를 정의하는 것입니다.

response.safeHeader('Content-type', 'application/json')

-1

javascript (이 경우 jQuery)를 통해 배열의 배경 이미지를 변경하려고 할 때 동일한 문제가 발생했습니다.

어쨌든.

이 대신에 :

m.setStyle('background-image','url(/templates/site/images/style5/'+backgs[i]+')')

이 작업을 수행:

eval("m.setStyle('background-image','url(/templates/site/images/style5/'+backgs[i]+')')");

'로 구조화 된 요소 내부에서 변수를 구문 분석하려고하면 Chrome 자바 스크립트가 제대로 작동하지 않습니다. 필자의 경우 이미지 배열이 삽입되기 직전에 중지되었습니다. 이미지 URL + 이미지 이름 (배열 내부)을 파싱하는 대신 이미지 URL 만 파싱했습니다.

코드 내부를 검색하여 어디서 발생하는지 확인해야합니다. FF, IE 및 기타 모든 것은이 문제가 없습니다.


4
eval도움이 될 경우 사용하지 마십시오 : javascripttoolbox.com/bestpractices/#eval
indra

-1

게시 대답 여기 에서 사이먼 - sarris은 저를 도왔다.

이것은 내 문제를 해결하는 데 도움이되었습니다.

Visual Studio 설치 관리자가 잘못된 줄을 레지스트리에 추가해야합니다.

regedit를 열고이 레지스트리 키를 살펴보십시오.

여기에 이미지 설명을 입력하십시오

그 열쇠 보이죠? 콘텐츠 유형 키? text / plain에서 text / javascript로 값을 변경하십시오.

크롬은 다시 쉽게 호흡 할 수 있습니다.

Windows 7에는 기본적으로 콘텐츠 형식이나 PercievedType이 없으므로 두 가지를 모두 안전하게 삭제할 수는 있지만 최소한 편집해야합니다.

어쨌든 나는 이것이 당신을 위해 그것을 고치기를 바랍니다!

변경 후 시스템을 다시 시작하는 것을 잊지 마십시오.


안녕하세요. 표절이 나쁘다. (mmmmkay?) 나는 SO 지침 에 따라 표절을 제거하기 위해 귀하의 답변을 편집했습니다 .
Samuel Harmer
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.