javascript - 如何使用带有 JQuery 的书签来发送 403 身份验证 header 作为跨域请求 (CORS)？

Question

所以我有一个在其他网站上执行 JavaScript 的书签，我想在其上的缓存按钮被触发时触发 403 Authentication required header 点击。这样，就会出现提示，要求他们登录。

问题是我不打算为我发出的ajax请求提供身份验证 header ，同时将 Access-Control-Allow-Origin: 设置为具有 的任何域>* 值。我应该明确定义我想要允许 403 身份验证 header 出现在哪个域上，但我不能。

这是我的代码。

.htaccess

header set Access-Control-Allow-Origin: *
#header set Access-Control-Allow-Methods: GET, POST, PUT, DELETE
header set Access-Control-Allow-Headers: Authorization

JQuery

$.ajax({
            headers : {
                "Authorization" : "Basic TVNF3TQtU1BGMjAx6C12bVxzbW4ydHBvaW50OlF3Z5J0eSEyM6Q1"
            },
            type: "GET",
            url: 'http://desbest.uk.to/clickrobot/favicon.png', //image for testing
            crossDomain:true,
            xhrFields: {
                withCredentials: true
            }, 
            //contentType: "application/json; charset=utf-8",
            //dataType: "json",
            success: function(data) {
                alert('ok!');
                //formatData(format_type,data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus + ' / ' + errorThrown);
            }
        }); 

我收到的错误

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

我见过 Diigo 书签可以做到这一点，所以这是可能的，但是如何实现呢？这可能吗？

Answer 1

让我们看一下documentation 。有两点需要注意:

...the browser will reject any response that does not have the Access-Control-Allow-Credentials: true header...

和

Important note: when responding to a credentialed request, server must specify a domain, and cannot use wild carding.

您应该返回的 header 是:

Access-Control-Allow-Origin: [some_origin]
Access-Control-Allow-Credentials: true 

您可以通过使用服务器脚本获取 Referer 来返回第一个 header ，从 Referer 中检索源，然后使用脚本返回 header 。在 PHP 中，我们可以按如下方式执行此操作:

$urllist = parse_url($_SERVER['HTTP_REFERER']);
$origin = $urllist['scheme'] . '://' . $urllist['host'];
header("Access-Control-Allow-Origin: " . $origin);

更新: 您应该阅读Access-Control-Allow-Origin Multiple Origin Domains ，特别是这个answer 。如果您可以访问 httpd.conf，您可能不需要 PHP 文件

无论如何，您的 url 不应该是图像，而应该是 PHP 脚本的 url。

url: 'http://desbest.uk.to/clickrobot/somescript.php'

在您的 php 脚本中，您检索请求的来源(这将是小书 checkout 现的页面。然后您可以输出带有来源的 header 。无论小书 checkout 现在何处，它都应该始终与正确的标题。

即使您指定了正确的 header ，我也不完全确定授权对话框是否会使用 Ajax 弹出。因此，这就是为什么我们将在下面看看 Diigo。

---

Diigo 使用不同的方法，即:单击“登录”后，JSONP用于请求由服务器上的服务器端脚本(例如 PHP)生成的 javascript 文件。 JSONP 是 CORS 的替代方案。来自不同地方的 JavaScript 文件可以包含在页面的 header 中，完全没有问题，这与 Ajax 请求不同。

如果用户未登录，请求 javascript 文件会发送一个 401 header ，其中显示“身份验证”对话框(这是服务器端脚本中的 coded!)。用户输入他/她的详细信息，并根据输入的信息返回 javascript 文件的内容。如果用户成功登录，它可能会返回类似 callback({signedin : 1}) 的内容，否则返回 callback({signedin : 0})。

现在调用带有某些参数的 javascript 函数回调。如果用户已登录，我们将显示小书签的内容。

---

在 htaccess 中放入什么: 未经测试，但您希望允许所有来源并将“Access-Control-Allow-Origin” header 设置为来源的值。我相信这应该可以解决问题:

SetEnvIf Origin "^(.*)$" ORIGIN_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_DOMAIN}e" env=ORIGIN_DOMAIN