使用jQuery ajax进行基本身份验证发出两个请求

Question

我试图用基本身份验证调用ajax请求， 为此，我添加了以下代码，

url: appSettings.dataURL+'/app/signature',
type: 'GET',
crossDomain: true,
dataType: 'html',
context : this,
cache : true,
headers: {"Authorization": "Basic " + btoa('username' + ":" + 'password')}

当我使用网络选项卡检查时，这将发出两个请求，一个带有身份验证，另一个没有身份验证。为什么呢？

参见截屏，

有可能避免这种情况吗？

注意：这仅适用于跨域请求。

Answer 1

跨站点请求遵循某些安全规则。如果唯一的自定义标头集是：

，则可以进行simple单个请求

• 接受
• 接受语言
• 内容的语言
• 内容类型

，内容类型为以下之一：

• 应用程序/ x-WWW窗体-urlencoded
• 的multipart / form-data的
• 文本/纯

您正在发送Authorization标头并请求HTML，因此默认情况下需要"pre-flight request"：

  

与简单的请求不同，＆＃34; preflighted＆＃34;请求首先通过OPTIONS方法向另一个域上的资源发送HTTP请求，以确定实际请求是否可以安全发送。跨站点请求是这样预检的，因为它们可能会对用户数据产生影响。

没有OPTIONS的初始Authorization请求是安全的，因为服务器只需要回复Access-Control-*标头，让浏览器知道您的完整请求是否可以继续。然后，Authorization的实际请求正在进行中，因此一切都按预期工作。

XMLHttpRequest对象确实允许您指定sending a request with credentials并可能只切换到一个请求：

xhrFields: { withCredentials: true }