为何未返回401状态码反而出现XHR请求失败？附代码示例

问题1：为何出现XHR请求失败而非返回401状态码？ #

这核心是浏览器同源策略和CORS（跨域资源共享）机制在起作用。当你从前端页面直接请求LinkedIn API这种跨域接口时，浏览器会先发送一个OPTIONS预检请求，用来确认目标服务器是否允许当前域名的跨域请求。

如果你的请求没有满足LinkedIn API的跨域要求（比如没有正确配置CORS相关请求头，或者没使用LinkedIn支持的跨域方式），这个预检请求就会直接失败，浏览器会拦截后续的实际请求——这时候你连真正的API请求都发不出去，自然得不到服务器返回的401未授权状态码，只会看到XHR请求整体失败。

另外，LinkedIn的旧版v1接口默认只支持JSONP跨域，而非标准CORS，这也会导致普通XHR请求直接被浏览器拦截，不会走到返回状态码的步骤。

问题2：你的jQuery Ajax代码为何彻底失败而非返回401？ #

先看你的代码：

$.ajax({ 
  url: "https://api.linkedin.com/v1/people/~", 
  //jsonpCallback: "callback", 
  //dataType: "jsonp", 
  success: function(data, textStatus, xhr) { 
    console.log(data) 
  }, 
  error: function(xhr, textStatus, error) { 
    console.log(xhr) 
  } 
});

问题出在你注释掉了dataType: "jsonp"这一行！LinkedIn的v1接口对于前端跨域请求，主要支持的是JSONP方式，而非标准CORS。当你去掉dataType: "jsonp"时，jQuery会默认用普通的XHR请求发送，这就触发了浏览器的同源策略拦截：

1. 浏览器发送OPTIONS预检请求到LinkedIn服务器，但LinkedIn的v1接口并没有配置允许你当前域名的CORS请求，所以预检请求被拒绝。
2. 预检失败后，浏览器直接终止请求，不会发送实际的GET请求去获取401状态码，所以你的error回调里只能看到XHR请求失败的信息，而非服务器返回的401。

如果想要正确获取到LinkedIn API的401状态码，你需要：

• 恢复dataType: "jsonp"配置，用JSONP方式发起请求（因为JSONP不受同源策略限制）；
• 同时确保你在请求中携带了正确的授权参数（比如oauth2_access_token），否则当你用JSONP发起请求时，服务器就会返回包含401状态的JSONP响应，你的回调就能捕获到对应的错误信息。

修正后的示例：

$.ajax({ 
  url: "https://api.linkedin.com/v1/people/~?oauth2_access_token=YOUR_ACCESS_TOKEN", 
  jsonpCallback: "linkedinCallback", 
  dataType: "jsonp", 
  success: function(data, textStatus, xhr) { 
    console.log(data) 
  }, 
  error: function(xhr, textStatus, error) { 
    // 此时如果授权失败，就能看到相关的错误信息，包括401对应的提示
    console.log(textStatus, error) 
  } 
});

另外要注意，LinkedIn的v1接口已经被废弃，建议迁移到v2接口，但核心的跨域处理逻辑类似——v2接口支持CORS，但需要你在LinkedIn开发者平台配置好允许的域名，否则同样会出现预检失败的情况。

内容的提问来源于stack exchange，提问作者chrism