JavaScript console.log가 오류를 발생시킵니다. "주 스레드에서 동기 XMLHttpRequest가 사용되지 않습니다…"

JavaScript console.log가 오류를 발생시킵니다. "주 스레드에서 동기 XMLHttpRequest가 사용되지 않습니다…"

---

Firefox 디버거를 사용하지 않고 다른 변수의 상태를 확인하기 위해 콘솔에 로그를 추가했습니다.

그러나 많은 장소에서하는 난이 추가 console.log내에서 main.js파일, 나 자신에 대신 내 사랑스러운 작은 손으로 쓴 메시지의 다음과 같은 오류가 나타납니다

기본 스레드의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향으로 사용되지 않습니다. 추가 도움이 필요하면 http://xhr.spec.whatwg.org/

console.log이 오류를 발생시키지 않는 코드 사용에 어떤 대안이나 래퍼를 추가 할 수 있습니까?

"잘못하고 있습니까?"

---

이것은 게으르고 반환되는 내용의 일부로 스크립트 태그를 포함했을 때 나에게 일어났습니다. 따라서 :

부분 HTML 내용 :

<div> 
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

적어도 제 경우에는 xhr을 통해 HTML 콘텐츠를 반환하면 jQuery가 해당 스크립트를 가져 오기 위해 호출하게됩니다. 이 호출은로드를 계속하려면 스크립트가 필요하다고 가정하기 때문에 비동기 플래그가 false로 발생합니다.

이와 같은 상황에서는 일종의 바인딩 프레임 워크를 조사하고 JSON 객체를 반환하거나 백엔드 및 템플릿에 따라 스크립트로드 방법을 변경할 수 있습니다.

jQuerygetScript() 를 사용 하여 관련 스크립트를 가져올 수도 있습니다 . 여기에 바이올린이 있습니다 .jQuery 예제의 간단한 사본이지만 스크립트가로드 될 때 경고가 표시되지 않습니다.

예

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

---

비동기 플래그가 false로 설정된 주 스레드 내의 XMLHttpRequest 요청으로 인해 경고 메시지가 발생할 수 있습니다.

https://xhr.spec.whatwg.org/#synchronous-flag :

작업자 외부의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향을 미치므로 웹 플랫폼에서 제거되고 있습니다. (이 과정은 오랜 시간이 걸린다.) JavaScript 전역 환경이 문서 환경 인 경우 개발자는 비동기 인수에 대해 false를 전달해서는 안된다. 사용자 에이전트는 개발자 도구에서의 이러한 사용에 대해 경고 할 것을 강력히 권장하며 InvalidAccessError 예외가 발생하면이를 실험 해 볼 수 있습니다.

미래의 방향은 작업자 스레드에서만 XMLHttpRequests를 허용하는 것입니다. 메시지는 그러한 영향을 경고하기위한 것입니다.

---

나는 또한 같은 문제에 직면했지만 async : true를 넣어서 해결할 수 있습니다. 나는 그것이 기본적으로 사실이라는 것을 알고 있지만 명시 적으로 쓸 때 작동합니다.

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

---

Visual Studio 2015/2017의 라이브 디버거에서 더 이상 사용되지 않는 호출이 포함 된 코드를 주입하고 있습니다.

---

때로는 스크립트를 ajax로로드해야하지만 스크립트가로드 될 때까지 문서 준비가 지연 될 수 있습니다.

jQuery는이 holdReady()기능을 지원 합니다.

사용법 예 :

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

실제 스크립트 로딩은 비동기 적이지만 ( 오류 없음 ) 문서의 준비가 완료된 후 나머지 JavaScript가 실행되면 효과는 동기화됩니다 .

이 고급 기능 은 일반적으로 DOM이 준비되어 있어도 ready 이벤트가 발생하기 전에 jQuery 플러그인과 같은 추가 JavaScript를로드하려는 동적 스크립트 로더에서 사용됩니다.

설명서 :
https://api.jquery.com/jquery.holdready

---

2019 년 1 월 7 일 업데이트

에서 JQMIGRATE :

jQuery.holdReady ()는 더 이상 사용되지 않습니다

원인 :jQuery.holdReady() 방법은 페이지의 글로벌 성능에 미치는 해로운 영향으로 인해 더 이상 사용되지 않습니다. 이 방법을 사용하면 페이지의 모든 코드가 장시간 초기화되지 않을 수 있습니다.

솔루션 : 모든 jQuery 준비 핸들러가 지연되지 않도록 페이지를 다시 작성하십시오. 예를 들어 실행이 안전 할 때 지연이 필요한 코드 만 늦게로드하여이를 수행 할 수 있습니다. 이 방법의 복잡성으로 인해 jQuery Migrate는 기능을 채우려 고 시도하지 않습니다. jQuery Migrate와 함께 사용되는 jQuery의 기본 버전에 더 이상 jQuery.holdReady()코드가 포함되어 있지 않으면 이 경고가 나타난 직후 코드가 실패합니다.

---

이 경고를 피하려면 다음을 사용하지 마십시오.

async: false

$ .ajax () 호출 중 하나에서. 이것은 더 이상 사용되지 않는 XMLHttpRequest의 유일한 기능입니다.

디폴트는

async: true

jQuery가 동기 XMLHTTPRequest를 더 이상 사용하지 않습니다.

---

@Webgr 부분 답변은 실제로 콘솔 로그 에서이 경고를 디버깅하는 데 도움이되었습니다. 답의 다른 부분은 너무 많은 다운 투표를 가져 왔습니다.

어쨌든, 여기 내 경우 에이 경고의 원인이 무엇인지 어떻게 알 수 있습니까?

1. Chrome 브라우저> Hit F12를 사용하여 DevTools 가져 오기
2. 서랍 메뉴를 엽니 다 (오른쪽 상단의 Chrome 3 세로 점)
3. 콘솔 아래에서 로그 XMLHttpRequests 옵션 확인
4. 오류가 발생한 페이지를 다시로드하고 콘솔 로그의 각 ajax 요청에서 발생하는 상황을 관찰하십시오.

필자의 경우, 다른 플러그인은 각 ajax 호출 후 2 개의 .js 라이브러리를 로드 하고 있었으며 절대 필요하지는 않았습니다. 악성 플러그인을 비활성화하면 로그에서 경고가 제거되었습니다. 이 시점에서 직접 문제를 해결하려고 시도하거나 (예 : 특정 페이지 나 이벤트로 스크립트로드를 제한-여기에 답변하기에는 너무 구체적인 방법 임) 타사 플러그인 개발자에게 문의하여 문제를 해결할 수 있습니다.

이것이 누군가를 돕기를 바랍니다.

---

나는 모든 인상적인 답변을보고있다. 나는 그가 문제를 일으키는 코드를 제공해야한다고 생각합니다. 아래 예제에서 page.php의 jquery에 링크 할 스크립트가있는 경우 해당 통지를받습니다.

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });

---

다음과 같은 경우 이러한 경고가 나타납니다.

1)을 포함하는 file1 <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. 페이지에 입력 필드가 있습니다. 입력 필드에 값을 입력하고 버튼을 클릭하십시오. Jquery는 외부 PHP 파일로 입력을 보냅니다.

2) 외부 PHP 파일에는 jquery가 포함되어 있으며 외부 PHP 파일에는 i도 포함되어 있습니다 <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. 이 경고가 표시되면.

<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>외부 PHP 파일에서 제거 되었으며 경고없이 작동합니다.

첫 번째 파일 (file1)을로드하는 것을 이해 jquery-1.10.2.js하면 페이지가로드되지 않고 (jquery 사용하여 외부 PHP 파일로 데이터를 전송 $.post) jquery-1.10.2.js계속 존재합니다. 다시로드 할 필요가 없습니다.

---

"example.com/files/text.txt"와 같은 쿼리에서 URL을 설정할 때이 예외가 발생했습니다. URL을 " http://example.com/files/text.txt "로 변경 했으며이 예외는 사라졌습니다.

---

그리고 하나의 can.js 스크립트를 다른 것 안에 포함시키는 예외가 있습니다.

{{>anotherScript}}

---

MVC 응용 프로그램에서 PartialView () 대신 View ()를 반환하는 메서드로 Kendo Window를 열었 으므로이 경고가 발생했습니다. View ()가 페이지의 모든 스크립트를 다시 검색하려고했습니다.

---

ZF2에서 나에게 일어난 일입니다. 모달 콘텐츠를로드하려고했지만 레이아웃을 비활성화하는 것을 잊었습니다.

그래서:

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;

---

@Nycen과 마찬가지로 Cloudfare에 대한 링크로 인해이 오류가 발생했습니다. 내 선택은 Select2 플러그인이었습니다.

그것을 고치기 위해 방금 제거했습니다.

 src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"

오류가 사라졌습니다.

---

이것은 내 경우에 해결됩니다.

JS

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
    options.async = true;
});

이 답변은이 링크에 삽입되었습니다

https://stackoverflow.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script

---

필자의 경우 이는 Cloudflare에서 제공하는 "CDNJS Selections"앱의 일부인 flexie 스크립트 로 인해 발생했습니다 .

Cloudflare에 따르면 "이 앱은 2015 년 3 월에 더 이상 사용되지 않습니다." 나는 그것을 끄고 메시지가 즉시 사라졌다.

https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com 을 방문하여 앱에 액세스 할 수 있습니다.

NB : 이것은이 스레드에 대한 내 대답의 사본입니다 .Synchronous XMLHttpRequest warning and <script> (솔루션을 찾을 때 둘 다 방문했습니다)

---

1. Chrome에서 press F12
2. 개발 도구->를 누릅니다 F1.
3. 설정-> 일반 "Don't show chrome Data Saver warning"- > 외관을 참조하십시오 : -이 확인란을 설정하십시오.
4. 설정-> 일반 "Log XMLHTTPRequest"- > 콘솔 : -이 확인란도 설정하십시오.

즐겨

---

나는 이것을 아래 단계로 고쳤다.

1. CDN 스크립트를 확인하고 로컬로 추가하십시오.
2. 스크립트 포함을 헤더 섹션으로 이동하십시오.

---

내 특별한 경우에는 Rails 부분을 렌더링하지 않고 태그의 render layout: false모든 스크립트를 포함하여 전체 레이아웃을 다시 렌더링 하지 않았습니다 <head>. render layout: false컨트롤러 작업에 추가 하면 문제가 해결되었습니다.

---

나에게 문제는 OK 요청에서 ajax 응답이 테이블과 같은 형식이 지정된 HTML 문자열 일 것으로 예상했지만이 경우 서버에서 요청에 문제가 발생하여 오류 페이지로 리디렉션되는 것입니다. 따라서 오류 페이지의 HTML 코드를 반환했습니다 ( <script어딘가에 태그가 있습니다. 콘솔이 아약스 응답을 기록했으며 그 시점이 내가 예상 한 것이 아니라는 것을 깨달았을 때 디버깅을 계속했습니다.

---

2014 년에 제기 된 질문과 2019 년이므로 더 나은 옵션을 찾는 것이 좋습니다.

fetchJavascript에서 api 를 사용 하면 더 많은 유연성을 제공 할 수 있습니다.

예를 들어,이 코드를 참조하십시오

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });

참고 URL : https://stackoverflow.com/questions/24639335/javascript-console-log-causes-error-synchronous-xmlhttprequest-on-the-main-thr