캐치되지 않는 구문 에러 : 예기치 않은 토큰 :


193

MooTools 스크립트에서 AJAX 호출을 실행 중입니다. Firefox에서는 제대로 작동하지만 Chrome에서는 Uncaught SyntaxError: Unexpected token :오류가 발생합니다. 이유를 알 수 없습니다. 나쁜 코드가 어디에 있는지 결정하기 위해 코드를 주석 처리하면 아무것도 반환되지 않습니다 .JSON이 반환되는 데 문제가 있다고 생각합니다. 콘솔을 확인하면 JSON이 반환되는 것을 볼 수 있습니다.

{"votes":47,"totalvotes":90}

문제가 없는데 왜이 오류가 발생합니까?

vote.each(function(e){
  e.set('send', {
    onRequest : function(){
      spinner.show();
    },
    onComplete : function(){
      spinner.hide();
    },
    onSuccess : function(resp){
      var j = JSON.decode(resp);
      if (!j) return false;
      var restaurant = e.getParent('.restaurant');
      restaurant.getElements('.votes')[0].set('html', j.votes + " vote(s)");
      $$('#restaurants .restaurant').pop().set('html', "Total Votes: " + j.totalvotes);
      buildRestaurantGraphs();
    }
  });

  e.addEvent('submit', function(e){
    e.stop();
    this.send();
  });
});

1
JSON은 괜찮습니다. 문제는 아마도 당신이 그것을 어떻게 다루는 지입니다. 코드를 표시하면 도움이됩니다.
tcooc

1
질문에 코드 부분을 추가했습니다.
trobrock

구문, JS 또는 JSON에는 문제가없는 것 같습니다. jsfiddle.net에 작동하지 않는 테스트 사례를 게시하면 HTML을 포함하여 도움이됩니다.
Oskar Krawczyk 2016 년

1
현재 인터넷을 테 더링하고 있으므로 모뎀에서 내가 찾은 웹 사이트의 HTML 소스를 압축하므로 실제로 코드에서 머리 나 꼬리를 만들 수 없습니다. 그러나 초보자는 모든 JS 코드를 외부 파일에 넣습니다. 이는 항상 디버깅을 더 쉽게 만듭니다 .JS 등으로 인해 오류가 발생하는 날씨를 알 수 있습니다.
Oskar Krawczyk

2
"예기치 않은 토큰"은 불법 문자 코드 일 수 있습니다. 콘솔로 인쇄 할 때 이러한 코드가 표시되지 않을 수 있습니다. 따라서 문자열을 한 번에 한 문자 씩 인쇄하거나 프로토콜 분석기 또는 디버거 등을 사용하여 문자열의 실제 바이트를 확인하십시오.
GroovyDotCom

답변:


94

빨간색 오류보기

잡히지 않은 구문 오류 : 예기치 않은 토큰 <

Chrome 개발자의 콘솔 탭에 응답 본문에 HTML이 표시되어 있습니다.

당신이 실제로보고있는 것은 <!DOCTYPE html>서버에서 예기치 않은 최상위 라인에 대한 브라우저의 반응 입니다.


4
질문이있을 때 왜 "예기치 않은 토큰 <"에 대해 이야기하는지 모르겠습니다 Unexpected token :. 귀하의 답변은 OP의 문제와 완전히 관련이 없습니다.
Michał Perłakowski

1
이 문제를 어떻게 해결합니까? Chrome 에서이 문제를 일으키는 PHP 리디렉션이 있습니다.
살아있는 생활을 위해

7
@andy_magoon에 추가하기 위해 필자의 경우 자바 스크립트를 제공 해야하는 스크립트 태그가 있었지만 요청이 HTML 페이지 (리디렉션 된 이유는 중요하지 않음)로 리디렉션 되었기 때문에 <! DOCTYPE html로 시작합니다. >는 유효한 자바 스크립트가 아니며 HTML을 JS로 구문 분석 할 때 브라우저에서 SyntaxError를 반환합니다.
david.barkhuizen

2
@Thom 문제를 해결하는 방법은 HTTP get이 예기치 않은 HTML이 아닌 원하는 자바 스크립트 파일을 반환하는지 확인하는 것입니다.
david.barkhuizen

1
파일 경로가 잘못되어 스크립트 태그에 지정된 파일을 찾을 수 없기 때문에이 오류가 발생했습니다.
newman

80

같은 문제가있는 사람들을위한 참고 자료-서버를 JSON으로 다시 응용 프로그램 / json으로 보내야하고 기본 jQuery 핸들러가 정상적으로 작동했습니다.


4
나는이 문제의 반대라고 생각합니다. 타사 API에서 JSON을 요청하고 응답으로 응용 프로그램 / 자바 스크립트를 반환 하고이 질문에서보고 한 것과 동일한 오류가 발생합니다. 처리 방법을 잘 모르겠습니다.
wuliwong

5
이상한 문제는 로컬 호스트에서는 잘 작동하지만 서버에서는 작동하지 않습니다. 왜 그런지 알아?
VishwaKumar

안녕하세요. 정확한 문제가 있으며 해결할 수 없습니다. 누군가 서버로 JSON을 다시 보내는 방법을 알려줄 수 있습니까
Alen

감사합니다. ( 이 SO를 잘못 읽었을 ) 응용 프로그램 / 자바 스크립트를 보내고 간단한 유효한 JSON 에서이 오류가 발생했습니다. application/json오류 를 해결 하기 위해 변경하십시오 . JSONP를 사용하지 않습니다.
scipilot

심지어 json 형식 { "success": true, "data": 2593}으로 응답을받은 후에도 "Uncaught SyntaxError : Unexpected token :"오류가 발생합니다.
Rupali Pemare

41

이것은 나에게 일어 났으며 그 이유는 위의 이유 중 하나가 아니 었습니다. jQuery 명령 getJSON callback=?을 사용하고 JSONP를 사용하도록 추가 하고 (도메인 간 이동에 필요) JSON 코드를 반환 {"foo":"bar"}하고 오류가 발생했습니다.

콜백 데이터를 포함시켜야했기 때문입니다. jQuery17209314005577471107_1335958194322({"foo":"bar"})

콜백없이 JSON을 사용하는 경우 성능이 저하되는 PHP 코드는 다음과 같습니다.

$ret['foo'] = "bar";
finish();

function finish() {
    header("content-type:application/json");
    if ($_GET['callback']) {
        print $_GET['callback']."(";
    }
    print json_encode($GLOBALS['ret']);
    if ($_GET['callback']) {
        print ")";
    }
    exit; 
}

희망적으로 그것은 미래에 누군가를 도울 것입니다.


그것은 많은 도움이되었습니다. jsonp 메소드를 사용할 때마다 json 데이터를 jsoncallback 데이터로 감싸 야합니다. 또한 jsonpcallback 데이터는 숫자로 시작해서는 안됩니다. 숫자로 시도했을 때 효과가 없었습니다. 이 답변에 표시된 것과 동일한 형식으로 시도했을 때 효과가있었습니다.
Ganesh Babu

사실이지만 오류는 동일하며 코드가 정상적으로 저하되고 JSON을 사용하는 경우 계속 작동합니다.
잔인한 ...

이것은 AJAX, jQuery 및 JSONP에서 나를 위해 일했습니다. 고마워요!
Piotr Wittchen

16

방금 문제를 해결했습니다. 표준 요청 호출에 문제를 일으키는 것이 있었으므로 이것이 대신 사용한 코드입니다.

vote.each(function(element){                
  element.addEvent('submit', function(e){
    e.stop();
    new Request.JSON({
      url : e.target.action, 
      onRequest : function(){
        spinner.show();
      },
      onComplete : function(){
        spinner.hide();
      },
      onSuccess : function(resp){
        var j = resp;
        if (!j) return false;
        var restaurant = element.getParent('.restaurant');
        restaurant.getElements('.votes')[0].set('html', j.votes + " vote(s)");
        $$('#restaurants .restaurant').pop().set('html', "Total Votes: " + j.totalvotes);
        buildRestaurantGraphs();
      }
    }).send(this);
  });
});

표준 Request 객체가 나에게 문제를주는 이유를 아는 사람이 있다면 알고 싶습니다.


3
표준 요청 및 request.json 사이의 차이점은 추가 헤더에 대부분이다 this.headers.extend({'Accept': 'application/json', 'X-Request': 'JSON'});이동 그림 -
디미타르 크리스토프

그것이 문제를 일으키는 원인이라는 것이 이상합니다.
trobrock

3
이중은 무엇입니까 $$?
falsarella

@DimitarChristoff-$$에 대한 falsarella에 대한 답변?

1
@bear 이중 달러 선택기는 MooTools에서 정의됩니다.
Anthony Faull

10

내 문제와 해결책을 목록에 추가 할 것이라고 생각했습니다.

나는 얻고있다 : Uncaught SyntaxError: Unexpected token <그리고 오류는 내 아약스 성공 진술 에서이 줄을 가리키고 있었다 :

var total = $.parseJSON(response);

나중에 json 결과 외에도 PHP에 오류가 있기 때문에 응답과 함께 HTML이 전송되는 것을 발견했습니다. PHP에서 오류가 발생하면 거대한 주황색 테이블로 경고하도록 설정할 수 있으며 해당 테이블은 JSON을 버리는 것입니다.

console.log(response)실제로 전송되는 내용을 확인하기 위해를 수행함으로써 그 사실을 알았습니다. JSON 데이터에 문제가있는 경우 console.log 또는 전송 된 내용과 수신 된 내용을 확인할 수있는 다른 명령문을 수행 할 수 있는지 확인하십시오.


1
나는 이걸했다. 내 PHP 파일 어딘가에 json을 반향하고 있었고 응답에서 php [// json data]를 얻었지만 구문 분석 할 수 없었습니다. 내 실수를 알아낼 수 있도록 이것을 게시 해 주셔서 감사합니다.
Nicholas Decker 2016 년

OP 문제는 완전히 다릅니다. 귀하의 경우 HTML을 JSON으로 구문 분석하려고하고 OP의 경우 JSON을 JavaScript로 구문 분석하려고합니다.
Michał Perłakowski

7

JSON 파일을 요청하면 서버는 JSON ( ) 대신 JavaScript Content-Type헤더 ( text/javascript)를 반환합니다 application/json.

MooTools 문서 에 따르면 :

javascript content-type의 응답은 자동으로 평가됩니다.

결과적으로 MooTools는 JSON을 JavaScript로 평가하려고 시도 할 때 이러한 JSON을 평가하려고 시도합니다.

{"votes":47,"totalvotes":90}

자바 스크립트 해석기로서 취급 {하고 }대신 객체 표기법의 블록 범위로. 다음 "코드"를 평가하는 것과 같습니다.

"votes":47,"totalvotes":90

보시다시피, :전혀 예상치 못한 것입니다.

해결책은 Content-TypeJSON 파일의 올바른 헤더 를 설정하는 것입니다 . .json확장명으로 저장하면 서버가 자체적으로 수행해야합니다.


4

귀하의 응답이 어떻게 든 평가되고있는 것 같습니다. Chrome에서 동일한 오류가 발생합니다.

var resp = '{"votes":47,"totalvotes":90}';
eval(resp);

이것은 중괄호 '{...}'가 자바 스크립트에서 코드 블록으로 해석되고 예상 한대로 객체 리터럴이 아니기 때문입니다.

JSON.decode () 함수를보고 거기에 평가가 있는지 확인하십시오.

비슷한 문제가 있습니다 : Eval () = 예기치 않은 토큰 : 오류


2

아무 의미가없는 경우이 오류는 html / javascript에 포함 된 PHP 오류 (예 : 아래 오류)로 인해 발생할 수도 있습니다.

<br />
<b>Deprecated</b>:  mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in <b>C:\Projects\rwp\demo\en\super\ge.php</b> on line <b>54</b><br />
var zNodes =[{ id:1, pId:0, name:"ACE", url: "/ace1.php", target:"_self", open:true}

<br />PHP에 의해 html에 삽입 된 코드 등이 오류의 원인이 아닙니다 . 이런 종류의 오류 (억제 경고)를 수정하려면 처음에이 코드를 사용하십시오.

error_reporting(E_ERROR | E_PARSE);

보려면, "소스보기"페이지를 마우스 오른쪽 단추로 클릭 한 후 완전한 html을 검사하여이 오류를 찾으십시오.


1

데이터가 잘못된 json 형식을 반환 할 때 " Uncaught SyntaxError : Unexpected token "오류가 발생하는 경우가 있습니다. 어떤 경우에는 잘못된 json 형식을 알 수 없습니다.
alert ()로 확인하십시오. 함수

onSuccess : function(resp){  
   alert(resp);  
}

귀하의 메시지는 { "firstName": "John", "lastName": "Doe"}이어야하며
아래 코드를 사용할 수 있습니다.

onSuccess : function(resp){  
   var j = JSON.decode(resp); // but in my case i'm using: JSON.parse(resp); 
}

" Uncaught SyntaxError : Unexpected token " 오류가 표시
되지만 잘못된 json 형식이 표시되는 경우
:

... { "firstName": "John", "lastName": "Doe"}

또는

Undefined variable: errCapt in .... on line<b>65</b><br/>{"firstName":"John", "lastName":"Doe"}

JSON 형식이 잘못되었으므로 JSON.decode 또는 JSON.parse 전에 수정하십시오.


3
디버깅 console.log()대신 사용 하는 것이 좋습니다 alert().
Michał Perłakowski

1

이것은 오늘 나에게도 일어났다. EF를 사용하고 AJAX 호출에 대한 응답으로 엔티티를 반환했습니다. 내 엔티티의 가상 특성으로 인해 서버에서 주기적 종속성 오류가 감지되지 않았습니다. 가상 속성에 [ScriptIgnore] 특성을 추가하면 문제가 해결되었습니다.

ScriptIgnore 특성을 사용하는 대신 DTO 만 반환하는 것이 좋습니다.


1

이는 익스프레스 서버에 404를 다시 /#원래 요청과 함께 라우팅하도록 규칙 설정이 있었기 때문에 발생했습니다 . 각도 라우터 / js가 요청을 처리하도록 허용 해당 경로를 처리 할 js 경로가없는 경우 전체 웹 페이지에 /#/whatever대한 요청 인 서버에 대한 요청 이 이루어집니다 /.

예를 들어 요청을하고 /correct/somejsfile.js싶지만 요청을 입력하지 /wrong/somejsfile.js않으면 서버에 요청됩니다. 해당 위치 / 파일이 존재하지 않으므로 서버는로 응답합니다 302 location: /#/wrong/somejsfile.js. 브라우저는 행복하게 리디렉션을 따르고 전체 웹 페이지가 반환됩니다. 브라우저가 페이지를 js로 구문 분석하면

잡히지 않은 구문 오류 : 예기치 않은 토큰 <

따라서 잘못된 경로 / 요청을 찾는 데 도움이되도록 302 개의 요청을 찾으십시오.

누군가에게 도움이되기를 바랍니다.


1

나는 같은 문제가 있었고 서버에서 반환 된 Json이 유효한 Json-P가 아니라는 것이 밝혀졌습니다. 교차 도메인 통화로 통화를 사용하지 않는 경우 일반 Json을 사용하십시오.


OP는 JSONP가 아닌 JSON을 사용합니다.
Michał Perłakowski

0

로 인코딩 된 부동 소수점 값을 직렬화 해제하려고 SyntaxError: Unexpected token I했을 때 " "를 얻었습니다 .jQuery.getJSON()InfinityINF


1
이 질문은 "예기치 않은 토큰 : "에 관한 것입니다.
Michał Perłakowski

0

내 경우에는 mvc 컨트롤러에서 잘못된 매핑으로 인해 스프링 mvc 응용 프로그램을 실행하는 동안 동일한 오류가 발생했습니다.

@RequestMapping(name="/private/updatestatus")

위의 매핑을로 변경했습니다.

 @RequestMapping("/private/updatestatus")

또는

 @RequestMapping(value="/private/updatestatus",method = RequestMethod.GET)

0

나를 위해 Chrome 브라우저 내부의 페이지를 소스를 볼 때 전구가 켜졌습니다. if 문에 추가 괄호가있었습니다. 실패한 선에 십자가가있는 빨간색 원이 즉시 나타납니다. Uncaught Syntax Error : Unexpected 토큰은 Chrome 콘솔에 처음 나타날 때 줄 번호를 참조하지 않기 때문에 다소 도움이되지 않는 오류 메시지입니다.


0

나는 이것에 잘못했다

   `var  fs = require('fs');
    var fs.writeFileSync(file, configJSON);`

이미 fs변수를 초기화했지만 다시 var두 번째 줄에 넣었 습니다.


0

AngularJs 1.4.6 또는 이와 유사한 버전 에서이 문제가 발생하는 경우 templateUrl제공 한 (경로) 에서 파일을 찾을 수 없기 때문에 앵귤러가 내 템플릿을 찾지 못했습니다. 나는 단지 도달 할 수있는 길을 제공해야했고 문제는 사라졌다.


나는 baseref url을 수정하여 동일한 문제를 해결했습니다-루트 폴더 => <base href = "/">를
가리킴

0

내 경우에는 잘못된 URL (존재하지 않음)이므로 두 번째 줄의 '보내기'가 다른 것이어야합니다 ...


0

내 실수는 자바 스크립트에서 url에 대한 단일 / 이중 인용잊어 버렸습니다 .

너무 잘못된 코드는 다음과 같습니다

window.location = https://google.com;

올바른 코드 :

window.location = "https://google.com";

-2

캐치되지 않는 구문 에러 : 예기치 않은 토큰 }

Chrome에서이 샘플 코드에 대한 오류가 발생했습니다.

<div class="file-square" onclick="window.location = " ?dir=zzz">
    <div class="square-icon"></div>
    <div class="square-text">zzz</div>
</div>

온 클릭을 고정시키는 문제를 해결했습니다.

... onclick="window.location = '?dir=zzz'" ...

그러나 오류는 문제와 관련이 없습니다.


OP가 "예기치 않은 토큰 : " 에 대해 질문했습니다 .
Michał Perłakowski
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.