關於jquery中ajax請求在ie中報No Transport錯誤解決流程

首先背景就是測試同學發現我們的網頁在ie9中展示不正確，實際是所有非同步的介面都沒有執行。然後我就開始了苦逼的排查過程。我們所有非同步介面都是使用jQuery的ajax方法發出的，使用的jquery版本是1.11.0。

我最先定位到的是ajax方法返回status=0,statusText=No Transport。然後開始了我的查找問題之旅，我在網上所查出的資料都說這個是由於跨域造成的，加上$.support.cros=true就可以。但實際我們項目訪問的介面並不屬於跨域。所以雖然加上這個屬性可以解決問題，但並沒有找到根源。

於是我開始看jquery的源碼，先定位了發生錯誤的代碼段，先貼上報錯點：

 1 // Get transport
 2         transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
 3 
 4         // If no transport, we auto-abort
 5         if ( !transport ) {
 6             done( -1, "No Transport" );
 7         } else {
 8             jqXHR.readyState = 1;
 9 
10             // Send global event
11             if ( fireGlobals ) {
12                 globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
13             }
14             // Timeout
15             if ( s.async && s.timeout > 0 ) {
16                 timeoutTimer = setTimeout(function() {
17                     jqXHR.abort("timeout");
18                 }, s.timeout );
19             }
20 
21             try {
22                 state = 1;
23                 transport.send( requestHeaders, done );
24             } catch ( e ) {
25                 // Propagate exception as error if not done
26                 if ( state < 2 ) {
27                     done( -1, e );
28                 // Simply rethrow otherwise
29                 } else {
30                     throw e;
31                 }
32             }
33         }

此處transport =false。剛開始並不能完全看懂jquery源碼，於是請教了我們公司的一位大神，在大神的指導下我開始排查為何transport =false。經過萬能的斷點調試，發現是由於下列代碼中的options.crossDomain = true導致的不能進入此段正確發送請求的關鍵代碼（具體的代碼作用不作分析）。到此終於定位罪魁禍首是最初我為了在html頁面可以直接訪問api伺服器而增加的crossDomain=true的設置（因為html和api伺服器屬於不同功能變數名稱）。（此處並未結束，請繼續往下看）

  1 // Determine support properties
  2 support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );
  3 xhrSupported = support.ajax = !!xhrSupported;
  4 
  5 // Create transport if the browser can provide an xhr
  6 if ( xhrSupported ) {
  7 
  8     jQuery.ajaxTransport(function( options ) {
  9         // Cross domain only allowed if supported through XMLHttpRequest
 10         if ( !options.crossDomain || support.cors ) {
 11 
 12             var callback;
 13 
 14             return {
 15                 send: function( headers, complete ) {
 16                     var i,
 17                         xhr = options.xhr(),
 18                         id = ++xhrId;
 19 
 20                     // Open the socket
 21                     xhr.open( options.type, options.url, options.async, options.username, options.password );
 22 
 23                     // Apply custom fields if provided
 24                     if ( options.xhrFields ) {
 25                         for ( i in options.xhrFields ) {
 26                             xhr[ i ] = options.xhrFields[ i ];
 27                         }
 28                     }
 29 
 30                     // Override mime type if needed
 31                     if ( options.mimeType && xhr.overrideMimeType ) {
 32                         xhr.overrideMimeType( options.mimeType );
 33                     }
 34 
 35                     // X-Requested-With header
 36                     // For cross-domain requests, seeing as conditions for a preflight are
 37                     // akin to a jigsaw puzzle, we simply never set it to be sure.
 38                     // (it can always be set on a per-request basis or even using ajaxSetup)
 39                     // For same-domain requests, won't change header if already provided.
 40                     if ( !options.crossDomain && !headers["X-Requested-With"] ) {
 41                         headers["X-Requested-With"] = "XMLHttpRequest";
 42                     }
 43 
 44                     // Set headers
 45                     for ( i in headers ) {
 46                         // Support: IE<9
 47                         // IE's ActiveXObject throws a 'Type Mismatch' exception when setting
 48                         // request header to a null-value.
 49                         //
 50                         // To keep consistent with other XHR implementations, cast the value
 51                         // to string and ignore `undefined`.
 52                         if ( headers[ i ] !== undefined ) {
 53                             xhr.setRequestHeader( i, headers[ i ] + "" );
 54                         }
 55                     }
 56 
 57                     // Do send the request
 58                     // This may raise an exception which is actually
 59                     // handled in jQuery.ajax (so no try/catch here)
 60                     xhr.send( ( options.hasContent && options.data ) || null );
 61 
 62                     // Listener
 63                     callback = function( _, isAbort ) {
 64                         var status, statusText, responses;
 65 
 66                         // Was never called and is aborted or complete
 67                         if ( callback && ( isAbort || xhr.readyState === 4 ) ) {
 68                             // Clean up
 69                             delete xhrCallbacks[ id ];
 70                             callback = undefined;
 71                             xhr.onreadystatechange = jQuery.noop;
 72 
 73                             // Abort manually if needed
 74                             if ( isAbort ) {
 75                                 if ( xhr.readyState !== 4 ) {
 76                                     xhr.abort();
 77                                 }
 78                             } else {
 79                                 responses = {};
 80                                 status = xhr.status;
 81 
 82                                 // Support: IE<10
 83                                 // Accessing binary-data responseText throws an exception
 84                                 // (#11426)
 85                                 if ( typeof xhr.responseText === "string" ) {
 86                                     responses.text = xhr.responseText;
 87                                 }
 88 
 89                                 // Firefox throws an exception when accessing
 90                                 // statusText for faulty cross-domain requests
 91                                 try {
 92                                     statusText = xhr.statusText;
 93                                 } catch( e ) {
 94                                     // We normalize with Webkit giving an empty statusText
 95                                     statusText = "";
 96                                 }
 97 
 98                                 // Filter status for non standard behaviors
 99 
100                                 // If the request is local and we have data: assume a success
101                                 // (success with no data won't get notified, that's the best we
102                                 // can do given current implementations)
103                                 if ( !status && options.isLocal && !options.crossDomain ) {
104                                     status = responses.text ? 200 : 404;
105                                 // IE - #1450: sometimes returns 1223 when it should be 204
106                                 } else if ( status === 1223 ) {
107                                     status = 204;
108                                 }
109                             }
110                         }
111 
112                         // Call complete if needed
113                         if ( responses ) {
114                             complete( status, statusText, responses, xhr.getAllResponseHeaders() );
115                         }
116                     };
117 
118                     if ( !options.async ) {
119                         // if we're in sync mode we fire the callback
120                         callback();
121                     } else if ( xhr.readyState === 4 ) {
122                         // (IE6 & IE7) if it's in cache and has been
123                         // retrieved directly we need to fire the callback
124                         setTimeout( callback );
125                     } else {
126                         // Add to the list of active xhr callbacks
127                         xhr.onreadystatechange = xhrCallbacks[ id ] = callback;
128                     }
129                 },
130 
131                 abort: function() {
132                     if ( callback ) {
133                         callback( undefined, true );
134                     }
135                 }
136             };
137         }
138     });
139 }

到此本來應該結束了，但並沒有，雖然我增加了crossDomain=true的設置，但為何其他瀏覽器可以正常訪問，而ie9不行呢。我繼續調試代碼，最終發現其他瀏覽器上述代碼中support.cors = true，而ie9下這個屬性等於false。從上述代碼中也可以看到，這個屬性的判斷來自於support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported )，其中xhrSupported= new window.XMLHttpRequest(),ie9中XMLHttpRequest沒有withCredentials屬性。也就是說這個問題是由於我的亂用屬性加上各瀏覽器相容性問題而導致的。