CORS 与 jQuery 一起使用，但不适用于 Prototype答案

【问题标题】：CORS working with jQuery but not with PrototypeCORS 与 jQuery 一起使用，但不适用于 Prototype
【发布时间】：2023-03-24 01:23:02
【问题描述】：

我在 Magento 平台上工作，但这确实是我在这里遇到的一个 JS 问题。

事情是这样的：

我正在开发 AJAX 登录功能，我希望无论您以 HTTP 还是 HTTPS 浏览 Magento 网站，登录操作都可以通过 HTTPS。

所以我遇到了这个CORS问题，因为协议需要匹配。

所以我的 Magento 控制器操作代码包括以下内容：

$this->getResponse()
        ->setHeader('Access-Control-Allow-Origin', rtrim(Mage::getUrl(''),'/'))
        ->setHeader('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Credentials')
        ->setHeader('Access-Control-Expose-Headers', 'x-json')
        ->setHeader('Access-Control-Allow-Credentials', 'true')
        ->setBody(Mage::helper('core')->jsonEncode($result));

我设法使用以下 jQuery 代码使其工作：

 jQuery.ajax({
        type: "POST",
        url: jQuery('#ajaxlogin-login-form').attr('action'),
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        data: jQuery('#ajaxlogin-login-form').serialize(),
        success: function(data, status, xhr) {
     }
 });

使用此代码，当我在 HTTP 中浏览并尝试登录时，它可以正常登录，当我返回 HTTP 时，我可以看到我已登录。 到目前为止太好了。

但我想避免使用 jQuery 并且 想通过原型来做到这一点所以我尝试了几件事，包括以下内容：

new Ajax.Request($('ajaxlogin-login-form').action, {
            requestHeaders: {
                "Access-Control-Allow-Headers" : "Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Headers",
                "Access-Control-Allow-Origin" : "https://my.dev.website",
                "Access-Control-Allow-Credentials" : true,
            },
            method: "post",
            parameters: $('ajaxlogin-login-form').serialize(),
            onCreate: function(response) {
                var t = response.transport;
                t.setRequestHeader = t.setRequestHeader.wrap(function(original, k, v) {
                    if (/^(accept|accept-language|content-language|access-control-allow-origin|access-control-allow-headers|access-control-allow-credentials)$/i.test(k))
                        return original(k, v);
                    if (/^content-type$/i.test(k) &&
                        /^(application\/x-www-form-urlencoded|multipart\/form-data|text\/plain)(;.+)?$/i.test(v))
                        return original(k, v);
                    return;
                });
            },
            onSuccess: function(transport) {
            }
 });

在这种情况下的问题是 登录工作正常（我无法通过调试控制器看到登录成功）但是当我返回以 HTTP 格式查看网站时，我没有登录在。但是我在 HTTPS 中查看时已登录。

所以这是我的问题：

我的 jQuery 代码做了哪些我的原型代码没有做的事情？
特别是，是什么让登录在使用 jQuery 代码的 HTTP 和 HTTPS 上都能工作？
因此，我如何修复我的原型代码以使其行为方式与我的 jQuery 代码相同？

【问题讨论】：

标签： jquery ajax magento cors prototype

【解决方案1】：

在尝试了很多不同的事情后，我设法让它与以下代码一起工作。

首先，我用它来支持我的 XHR 中的withCredentials：

Ajax.Request.prototype.setRequestHeaders = Ajax.Request.prototype.setRequestHeaders.wrap(function(setHeaders) {
    setHeaders();
    if (this.options.xhrFields) {
        Object.extend(this.transport, this.options.xhrFields);
    }
});

然后我修改了我的原型代码如下：

new Ajax.Request($('ajaxlogin-login-form').action, {
            xhrFields: {
                    withCredentials: true
                },
            method: "post",
            parameters: $('ajaxlogin-login-form').serialize(),
            onCreate: function(response) {
                var t = response.transport;
                t.setRequestHeader = t.setRequestHeader.wrap(function(original, k, v) {
                    if (/^(accept|accept-language|cookie|content-language|access-control-allow-origin|access-control-allow-headers|access-control-allow-credentials)$/i.test(k))
                        return original(k, v);
                    if (/^content-type$/i.test(k) &&
                        /^(application\/x-www-form-urlencoded|multipart\/form-data|text\/plain)(;.+)?$/i.test(v))
                        return original(k, v);
                    return;
                });
            },
            onSuccess: function(transport) {
            }
 });

【讨论】：