\'jQuery.ajax#get\' 이후 예기치 않은 토큰 콜론 JSON' 오류를 해결하는 방법은 무엇입니까?

'jQuery.ajax#get 이후 예상치 못한 토큰 콜론 JSON': 종합 가이드

소개

이 문제는 jQuery를 사용하여 AJAX 요청을 시도하고 요청 구성과 호환되지 않는 형식으로 JSON을 반환하는 서버로부터 데이터를 수신할 때 발생합니다. 답답할 수 있지만 근본 원인을 이해하고 적절한 해결 방법을 적용하면 문제가 해결될 수 있습니다.

근본 원인

jQuery 이후 "예기치 않은 토큰 콜론 JSON. ajax#get'은 서버가 적절한 패딩이나 콜백 쿼리 문자열 매개변수 없이 JSON 데이터를 반환할 때 발생합니다. JSONP(JSON with Padding)는 교차 출처 요청을 할 때 사용되는 기술로, 브라우저 보안 제한을 피하기 위해 서버가 함수 호출에서 JSON 데이터를 래핑합니다. 그러나 서버가 패딩 또는 콜백 매개변수를 포함하지 못하는 경우 브라우저는 응답을 잘못된 JSON으로 해석합니다.

해결책

이 문제를 해결하려면 서버가 JSONP 응답을 올바르게 생성하는지 확인해야 합니다. 이는 함수 호출 내에서 JSON 데이터를 래핑하고 쿼리 문자열에 콜백 매개변수가 포함되도록 하는 것을 의미합니다.

Node.js Express에서

Node.js에서 Express에서는 res.jsonp() 메서드를 사용하여 JSONP 응답을 생성할 수 있습니다.

app.get('/', (req, res) => {
  res.jsonp({
    Name: 'Tom',
    Description: 'Hello it's me!'
  });
});

또는 패딩 및 콜백 매개변수를 수동으로 추가할 수 있습니다.

const callback = req.query.callback;
const data = JSON.stringify({
  Name: 'Tom',
  Description: 'Hello it's me!'
});

if (callback) {
  res.setHeader('Content-Type', 'text/javascript');
  res.end(`${callback}(${data})`);
} else {
  res.setHeader('Content-Type', 'application/json');
  res.end(data);
}

jQuery

클라이언트 측에서는 dataType: 'jsonp' 옵션을 지정하여 JSONP를 사용하도록 AJAX 요청을 구성할 수 있습니다.

$.ajax({
  url: findUrl,
  type: 'get',
  dataType: 'jsonp',
  success: (data) => {
    // ...
  },
  error: (jqXHR, textStatus, errorThrown) => {
    // ...
  }
});

결론

서버가 JSONP 응답을 올바르게 생성하고 클라이언트가 AJAX 요청을 적절하게 구성하는지 확인하면 "jQuery.ajax#get 이후 예기치 않은 토큰 콜론 JSON" 오류를 방지하고 서버에서 JSON 데이터를 성공적으로 검색할 수 있습니다. .

위 내용은 \'jQuery.ajax#get\' 이후 예기치 않은 토큰 콜론 JSON' 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!