无需弹窗输账号密码，调用带Basic AUTH的REST API遇阻求助

问题根源 #

• JSONP不支持自定义HTTP请求头，你代码里加的Authorization认证头根本没被发送到API服务器，所以服务器还是会弹出基础认证对话框。
• 不用JSONP时，浏览器会发送OPTIONS预请求验证跨域权限，但目标API服务器没正确处理这个预请求（没返回200/204状态码），导致CORS报错。

具体解决步骤 #

1. 调整API服务器配置（关键） #

必须让目标API服务器正确支持CORS，尤其是处理OPTIONS预请求：

• 对OPTIONS请求返回200或204状态码
• 返回以下CORS响应头：
  • Access-Control-Allow-Origin: 你的前端域名（不能用*，因为带认证头时浏览器不允许通配符）
  • Access-Control-Allow-Methods: GET, OPTIONS
  • Access-Control-Allow-Headers: Authorization
  • Access-Control-Allow-Credentials: true

2. 修正前端AJAX代码 #

删掉无效配置，调整后的代码如下：

$.ajax({
    type: "GET", 
    url: 'https://www.XXTEST.com?from=2022-10-30',
    headers: {
        'Authorization': 'Basic ' + btoa("username" + ":" + "password")
    },
    xhrFields: {
        withCredentials: true
    },
    success: function (data) {
        alert(data);
    },
    error: function(xhr, status, error) {
        console.log('请求失败:', xhr.responseText);
    }
});

• 移除dataType: 'jsonp'，改用标准AJAX请求
• 删掉前端的Access-Control-Allow-Origin和Content-Type（这俩是服务器返回的头，前端设置无效；GET请求默认也不需要application/json类型）
• 加上xhrFields.withCredentials: true，确保认证信息能跨域发送

3. 无服务器修改权限时的替代方案 #

如果没法改目标API服务器，只能通过后端代理中转请求：

• 自己搭建一个后端接口，由后端去调用目标API（后端不受浏览器CORS限制）
• 后端请求时带上Authorization头，前端只需要请求自己的后端接口就能拿到数据，不会触发认证弹窗

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