不使用 jQuery 发送跨域 ajax 请求答案

【问题标题】：Sending cross-domain ajax requests without jQuery不使用 jQuery 发送跨域 ajax 请求
【发布时间】：2016-10-02 20:30:08
【问题描述】：

我有以下代码：

function ajax(callback, requestString){
    console.log("basic ajax sending");
    var xmlhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            callback(xmlhttp.responseText); //we got a response    
        }
    }

    xmlhttp.open("GET", requestString, true);
    xmlhttp.send();

}
//Here: code to be able to use that function repeatedly.

如果在我的 node.js 服务器的域上使用它会很好，问题是我正在开发一个 API，并且请求必须跨域发送。这些请求（requestString）只是一个字符串，它的格式类似于：“http://example.com/r?a=a”+“&b=b”如果重要的话。我收到以下错误：无法加载 XMLHttpRequest。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。我确实看到了 jQuery 和 jsonP 的解决方案，但我不想将 jQuery 推给我的客户，所以我必须找到一个好的解决方案...... 感谢您的宝贵时间！

【问题讨论】：

标签： javascript ajax node.js cross-domain

【解决方案1】：

但是 jsonP 可以在没有 jQuery 的情况下工作。例如：

var CallbackRegistry = {};

function scriptRequest(url, onSuccess, onError) {
    var scriptOk = false;
    // generating JSONP function name
    var callbackName = 'cb' + String(Math.random()).slice(-6);
    // add name in url
    url += ~url.indexOf('?') ? '&' : '?';
    url += 'callback=CallbackRegistry.' + callbackName;
    CallbackRegistry[callbackName] = function (data) {
        scriptOk = true;
        delete CallbackRegistry[callbackName];
        onSuccess(data);
    };
    function checkCallback() {
        if (scriptOk) return;
        delete CallbackRegistry[callbackName];
        onError(url);
    }
    var script = document.createElement('script');
    // for IE
    script.onreadystatechange = function () {
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
            this.onreadystatechange = null;
            setTimeout(checkCallback, 0);
        }
    }
    script.onload = script.onerror = checkCallback;
    script.src = url;
    document.head.appendChild(script);
}

现在你可以通过跨域调用得到响应

function afterSuccess(data) {
    alert('Success' + data);
}
function afterError(data) {
    alert('Error' + data);
}

scriptRequest(url, afterSuccess, afterError);

【讨论】：

【解决方案2】：

好吧，在服务器端，您可以将端点的 Access-Control-Allow-Origin 更改为 Access-Control-Allow-Origin: *，...注意这将匹配任何内容。根据您的服务器框架，肯定有一种方法可以将某些 url 列入白名单以访问您的端点。希望有帮助

【讨论】：