easports611 easports611 - 6 months ago 20
Javascript Question

cross-domain requests - javascript

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:


  1. 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.


  2. 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.

Answer

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