XMLHttpRequest가 파일을로드 할 수 없습니까?

Question

d3.csv("result.csv", function(flights) { 
    var nestByDate = d3.nest() 
    .key(function(d) { return d3.time.day(d.date); }); 
    .......... 

위의 d3.js 코드를 웹 서버에서 실행하려고하면 csv 파일을로드하여 d3.js를 올바르게 실행합니다.

그러나 나는 다음과 같이

d3.csv("D:\\Project Space\\D3Demo\\WebContent\\result.csv", function(flights) { 
    var nestByDate = d3.nest() 
    .key(function(d) { return d3.time.day(d.date); }); 
    .......... 

가 다음 오류 다음 쇼, d3.js를 실행하려고 할 때 :

XMLHttpRequest cannot load file:///D:/Project%20Space/D3Demo/WebContent/result.csv. Cross origin requests are only supported for HTTP`

어떻게이 문제를 해결하기 위해?

Answer 1

D3의 편리한 기능을 사용하여 문제를 해결할 방법이 없습니다.

d3.csv는 근본적으로 AJAX 요청이며 동일한 출처 정책에 따릅니다.

파일 위치를로드하면 브라우저는 요청한 파일이 동일한 도메인 (사용자의 경우 로컬 호스트)에 존재하지 않는다는 사실을 인식하고 요청이 완료되지 않도록합니다.

이 문제를 해결할 수있는 간단한 방법은 로컬 호스트 또는 사용중인 모든 콘텐츠를 제공하는 것입니다.

Cross-origin Resource Sharing 또는 더 나은 호환성을 위해 JSONP을 볼 수 있습니다. 이 두 가지 경우 모두 CSV 데이터를 자바 스크립트 배열로 변환하는 자체 함수를 롤업해야 할 것입니다.