隨著前端技術的發展,前后端分離的項目越來越多,跨域問題也愈加普遍。而 axios 作為一款強大的 HTTP 請求庫,能夠輕松地處理跨域請求。本文將介紹如何使用 axios 發送跨域請求獲取 JSON 數據。
首先,我們需要在后端服務器上配置允許跨域訪問。常見的做法是在響應頭中添加 Access-Control-Allow-Origin,如下:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); // 允許所有來源訪問
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); // 允許訪問的自定義頭信息
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); // 允許訪問的方法
next();
});
然后,在前端代碼中使用 axios 發送 GET 請求獲取跨域 JSON 數據。代碼如下:
axios.get('http://example.com/api/data')
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
這里以獲取名為 data 的 JSON 數據為例。在 then 中,我們可以通過 response.data 來獲取數據內容。在 catch 中,我們可以處理錯誤,例如輸出錯誤信息。
需要注意的是,由于跨域請求需要等待服務器響應,因此我們應當處理異步請求,使用 then 和 catch 來獲取數據和處理錯誤。
最后,以上述方式獲取的 JSON 數據可以在前端進行展示和處理,例如渲染表格和圖表等視覺化操作。
上一篇JSP集成vue
下一篇mysql使用中文字段