跨域请求 - javascript

cross-domain requests - javascript

背景:

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

我的计划:

使用javascript直接从link下载数据,然后将数据转为javascript对象(可能使用jQuery-csv)。在此之后,我将使用 DataTables 或其他 javascript 库来显示数据。

我被卡住的地方:

经过一些研究,这样做似乎违反了 "same-origin policy"。根据我的阅读,在 javascript.

中从外部来源下载数据是不可接受的

问题:

  1. 我说的对吗?是否从外部数据源下载 .csv 违反了"same-origin policy"?
    • 如果我不正确,从上面的 link 下载 .csv 并将其转换为 javascript 对象(最好使用 jQuery)所需的代码片段将非常有帮助。
  2. 如果我是对的,为什么下载外部 .csv 会违反此政策,而采购外部图像以用于网站却不会违反此政策?例如

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

备注:

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

你要实现的项目有几个问题:

  1. 由于 CORS 政策,您不能使用 AJAX 请求下载第三方文件或获取数据。有时网站将允许共享其资源,在这种情况下,可以通过 AJAX 获取第三方数据。 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)

  2. 即使您能够下载 CSV 文件,您也必须解析它以显示数据,并且由于您使用的是 JavaScript,您将在客户端计算机上下载它然后您将需要访问它,这是不可能的。 (您无法从 Javascript 访问系统文件 [可以在此处找到更多详细信息:Local file access with javascript

您不能向不是您的服务器的其他来源发出 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 ';'
  }
});

或者您可以做的另一件事是制作一个标签,并在用户下载资源后向他们显示一个模态 window 以便重新发送到您的应用程序