d3.json是D3.js庫中一個用于獲取JSON數據的函數。但在實際使用中,由于瀏覽器的安全機制,可能會遇到報錯“跨域請求被拒絕”的問題,導致無法獲取數據。
d3.json("http://example.com/data.json", function(data){ console.log(data); });
當使用d3.json請求一個不同域名下的JSON文件時,瀏覽器會阻止該請求,以防止可能的安全問題。這種情況下,瀏覽器會報錯“Access to XMLHttpRequest at 'http://example.com/data.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”
為了解決這個問題,我們可以通過在服務端設置允許跨域請求的頭部信息,來允許瀏覽器發出請求。如在使用Node.js搭建的服務器中,可以使用以下代碼:
app.use(function(req, res, next){ res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE"); res.header("Access-Control-Allow-Headers", "Content-Type"); next(); });
其中Access-Control-Allow-Origin表示允許跨域請求的來源地址,*表示允許任意來源。Access-Control-Allow-Methods表示允許跨域請求的方法,Content-Type表示允許請求的頭部信息。
在服務端設置好允許跨域請求的頭部信息后,再次使用d3.json請求數據時,即可正常獲取數據。
上一篇vue 頁面循環數組
下一篇d3.json 同步