如何使用 Javascript 从外部 URL 获取 CSV 文件

Question

我正在尝试从以下 URL (http://s3.amazonaws.com/misc-ww/data.csv) 获取 CSV 文件并即时解析此文件中的数据。我试图通过解析文件中的数据来实现的目标很重要，如果您想对此提出建议，请随时查看该文件； 但是我当前的问题在于获取文件本身中的数据。使用 XMLHttpRequest、Ajax 调用或 JSONP 调用时；响应总是返回错误。这意味着由于某种原因无法访问该文件。

经过几个小时的研究，我确定这与某种安全限制（跨域请求）有关，遗憾的是我还没有进一步了解如何绕过它。出于示例目的，我创建了一个 jsFiddle 突出显示我通过 AJAX JSONP 调用（代码如下所示）检索 CSV 文件的尝试。

HTML

<button>Click me to get the CSV File</button>

Javascript

function getCSV() {
    $.ajax({
        url: "http://s3.amazonaws.com/misc-ww/data.csv",
        type: 'get',
        dataType: 'jsonp',
        success: function(data) {
            alert("Success: " + data);
        },
        error: function(jqXHR, textStatus, errorThrow){
            alert("Error: " + jqXHR['responseText']);
        }
    });
}

$('button').click(函数() { 得到CSV(); });

我的主要目标是能够单独通过 Javascript 实现这一目标，但是我非常欢迎涉及 jQuery 的任何答案。我知道 javascript 框架可以让这个为我工作，但在我的情况下，我需要在没有它们的情况下进行编码。

Answer 1

如果服务器不支持，您无法通过 JSONP 调用真正绕过 CORS。 server 不必设置 "Access-Control-Allow-Origin: *" header。相反，服务器可以在回调函数中发送响应以绕过直接 JSON 响应。所以你的问题是你的 .csv 文件没有包含在回调函数中。

因此支持 JSONP 并获取 ?callback=cbFunc 的服务器将打印：

cbFunc('here is my file content')

现在您请求 .csv 文件，服务器发送它时没有将其包装到回调函数。这就是您最终受到安全限制的原因。

长话短说：您无法通过 AJAX JSONP 获取文件，因为 s3.amazonaws.com 不支持 JSONP.

这里有关于 JSON 和 JSONP 的很好的解释：http://json-jsonp-tutorial.craic.com/index.html

抱歉重复我自己。

如何使用 Javascript 从外部 URL 获取 CSV 文件

How to get a CSV file from an external URL using Javascript

javascript

csv

ajax

jquery

xmlhttprequest