파이어폭스의 ajax문제

IE,크롬,사파리는 잘되는데 파이어폭스만 오류가 났다.

js경고로 

1. 메인 쓰레드에서의 동기화된 XMLHttpRequest는 사용자 경험에 안좋은 영향을 미치기 때문에 더이상 사용하지 않습니다. 더 자세한 사항은 http://xhr.spec.whatwg.org/ 를 참고해 주십시오.

2. window 문맥의 동기 모드에 있어서의 XMLHttpRequest 의 withCredentials 프로퍼티의 사용은 지원하지 않게 되었습니다.

이 두개 때문에 로그인바가 안나왔었는데 검색해보니 원인을 찾았다.

비동기로 바꾸니 잘됨..

아래 참고 사이트 본문 스크랩

----------------------------------------------------------------------------

어제까지 잘 되던 로그인이 갑자기 안됩니다. IE나 크롬, 사파리에서는 여전히 잘 되는데, 파이어폭스만 반항하기 시작했습니다. 다른 브라우저들에서는 잘 되니, 서버 측 개발자가 멍청한 실수를 해서 그렇다고 우길 수도 없습니다. 멀쩡하던 기능을 망친 범인은 나란 말인데, 나는 최근에 로그인 관련 기능에는 손도 안 댔습니다. 말썽 많은 IE도 아니고 파이어폭스가 문제라니... 열심히 검색한 끝에 원인을 찾았습니다.

말썽이 생긴 로그인 페이지는 Ajax 호출을 통해 로그인을 수행합니다. 사용자 인증을 처리하는 서버는 다른 도메인에 있습니다. Cross domain을 사용한다는 뜻이지요. Ajax 호출은 jQuery을 이용해서 하고 있는데, 문제는 withCredentials = true 에서 발생했습니다.

http://www.w3.org/TR/XMLHttpRequest/#the-withcredentials-attribute; When set: throws an "InvalidAccessError" exception if either the synchronous flag is set and the JavaScript global environment is a document environment or if the anonymous flag is set.

간단히 말해 동기(synchronous) ajax 호출을 할 때에는 withCredentials을 설정하면 InvalidAccessError 가 발생한다는 뜻입니다. Ajax을 다루는 책들마다 그렇게 비동기(asynchronous) 호출이 좋다고 권하는데, 무슨 심사인지 동기 호출을 했더군요. 간단히 async: false 을 true로 고쳤더니, 쌩쌩 잘 돌아갑니다.

이 W3c 권고안을 파이어폭스 20부터 지키기 시작한 모양이군요. 파이어폭스 19에서는 동기 호출과 withCredentials을 함께 쓰더라도 전혀 문제가 없었습니다. 다른 브라우저들은 아직도 문제가 없습니다. 하지만 언제 W3c의 권고를 받아들일지 모릅니다. 어제까지 멀쩡하던 기능이 망가져서 개발자가 환장할지 모르니, 미리 미리 고쳐두겠습니다.

굳이 동기 호출을 고집한다면 withCredentials 설정을 빼면 됩니다. 물론 댓가는 치뤄야 합니다. 서버에서 cookies, HTTP authentication, and client-side SSL certificates 을 읽지 못하게 됩니다. 즉 사용자 컴퓨터에 숨어있는 데이터들을 서버로 전송하지 않습니다. 서버에서 쿠키를 읽을 필요가 없다면 withCredentials을 빼도 괜찮습니다.

만약 cross domain을 사용하지 않는다면 withCredentials 을 설정하건 말건간에 cookie는 잘 전달됩니다. 이 경우에라도 withCredentials 가 설정되어 있다면 동기 호출은 안됩니다. withCredentials 을 빼는 쪽이 좋겠군요.

지금 개발하고 있는 사이트에서 동기 ajax 호출이 이곳 저곳에 많이 숨어 있습니다. 서버는 cookie을 읽어서 권한을 검사할테니 withCredentials을 뺄 수 없습니다. 할수없이 모두 찾아서 비동기 호출로 바꾸어야 합니다. 그러게 처음부터 책에서 시키는대로 했으면 문제가 없었을텐데. 고치고 테스트 하느라 며칠을 고생하게 생겼습니다.

참고 자료

http://www.w3.org/TR/XMLHttpRequest/#the-withcredentials-attribute

http://www.w3.org/TR/cors/

[출처] 동기(synchronous) ajax 호출과 withCredentials|작성자 바탕

출처 | 동기(synchronous) ajax 호출과 withCredentials 

[출처] 동기(synchronous) ajax 호출과 withCredentials|작성http://blog.naver.com/batang2001/110166772483