cross-domain requests - javascript

Question

Background:

I am creating a web-app to download and display housing prices. Data source: http://www.fhfa.gov/DataTools/Downloads/Documents/HPI/HPI_AT_metro.csv

My Plan:

Download the data directly from the link using javascript, and then turn the data into a javascript object (possibly using jQuery-csv). After this, I would use DataTables or another javascript library to display the data.

Where I got stuck:

After some research, it appears doing this violates the "same-origin policy". From what I read, it is not acceptable to download data from external sources in javascript.

Questions:

Am I correct? Does downloading a .csv from an external data source violate the "same-origin policy"?
- If I am not correct, the pieces of code required to download the .csv from the link above and convert it into a javascript object (preferably using jQuery) would be extremely helpful.
If I am correct, why is downloading an external .csv a violation of this policy, whereas sourcing an external image to be used in a website is not a violation of this policy? E.g.

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

Notes:

I am hoping to do it this way, so I can avoid using a server side language completely. If this does not work, I plan on setting up the app using python/flask, which would only be used to download the data.

It's not possible to download a file via an AJAX request, so I don't see how what you describe would violate the SOP. That said, I also fail to see how this could possibly work as you download the file to the client machine so it would then be inaccessible to your JS code. — Rory McCrossan, May 22 '16 at 18:22
@RoryMcCrossan not really true any more regarding download. for example `` download attribute , `FileSaver` API etc — charlietfl, May 22 '16 at 18:28
Can use proxy on your own server to retrieve the data, then ajax to your proxy. Or use third party proxy service like YQL — charlietfl, May 22 '16 at 18:32

score 1 · Accepted Answer · edited May 23 '17 at 12:24

There are a few problems with the project you want to achieve:

You cannot use an AJAX request to download a third party file or fetch data because of the CORS policy. Sometimes a website will allow to share its resources and in that case getting 3rd party data via AJAX is possible. (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
Even if you were able to download the CSV file, you would have to parse it to display the data and since you are using JavaScript you will be downloading it on the client computer and then you will need to access it which is not possible. (You cannot access system files from the Javascript [more detail can be found here: Local file access with javascript)

score 1 · Answer 2 · answered May 22 '16 at 18:43

you cannot do an ajax request to another source that is not your server because this violates the cross-origin request policy of the browser.

You can do two things. use the python solution and enable CORS to do the ajax request without browser policy problem. because you are enabling your server accept that type of request. and then get it the ajax request like this

$.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 ';'
  }
});

OR the other thing you can do is make a tag and after the users download the resource show them a modal window for re-sends to your application

cross-domain requests - javascript

2 Answers2