Question

背景

我正在创建一个网络应用程序来下载和显示房价。数据来源：http://www.fhfa.gov/DataTools/Downloads/Documents/HPI/HPI_AT_metro.csv

我的计划：

使用javascript直接从链接下载数据，然后将数据转换为javascript对象（可能使用jQuery-csv）。在此之后，我将使用DataTables或其他JavaScript库来显示数据。

我被困的地方：

经过一番研究，看来这样做违反了同源政策＆＃34;。根据我的阅读，在javascript中从外部源下载数据是不可接受的。

问题：

我说错了吗？是否从外部数据源下载.csv 违反了同源政策＆＃34;？
- 如果我不正确，从上面的链接下载.csv并将其转换为javascript对象（最好使用jQuery）所需的代码片段将非常有用。
如果我是正确的，为什么下载外部.csv违反此政策，而在网站上使用外部图像并不违反此政策？ E.g。

<img src="http://www.freeflashgamearcade.com/games/images/tic-tac-toe.jpg">

http://www.freeflashgamearcade.com/games/images/tic-tac-toe.jpg

备注：

我希望这样做，所以我可以完全避免使用服务器端语言。如果这不起作用，我计划使用python / flask设置应用程序，它只用于下载数据。

Answer 1

您想要实现的项目存在一些问题：

由于CORS策略，您无法使用AJAX请求下载第三方文件或获取数据。有时网站会允许共享其资源，在这种情况下，可以通过AJAX获取第三方数据。（https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS）
即使您能够下载CSV文件，也必须解析它以显示数据，因为您使用的是JavaScript，您将在客户端计算机上下载它，然后您需要访问它这是不可能的。（您无法从Javascript访问系统文件[更多细节可在此处找到：Local file access with javascript）

Answer 2

您不能对不是您的服务器的其他来源执行ajax请求，因为这违反了浏览器的跨源请求策略。

你可以做两件事。使用python解决方案并启用CORS来执行ajax请求而不会出现浏览器策略问题。因为您正在启用服务器接受该类型的请求。然后得到像这样的ajax请求

$.ajax({
  type: "get",
  url: "mypythonresource.com/Documents/HPI/HPI_AT_metro.csv" 
  success: function(response){ 
    // response will be a string that cointains the CSV data separed by ';'
  }
});

或者您可以做的另一件事就是制作一个标签，在用户下载资源后，向他们展示一个模式窗口，用于重新发送到您的应用程序

跨域请求 - javascript

2 个答案: