1.我已經根據CORS的說明文檔,進行了配置。文件路徑為:http://www.ruanyifeng.com/blo...;
本地專案配置如圖:(1).導入支援包
(2) web.xml的配置
2.透過上面的配置,理論上是可以進行跨域請求,但是事實是不行的!貼上我的html程式碼:
<!doctype html>
<html>
<head>
<title>axios - get example</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
</head>
<body class="container">
<h1>axios.get</h1>
<ul id="people" class="list-unstyled"></ul>
<script src="axios.min.js"></script>
<script>
var url = 'https://api.douban.com/v2/book/1220562';
axios.get(url)
.then(function (response) {
document.getElementById('people').innerHTML = '<li class="text-danger">' + response.data + '</li>';
})
.catch(function (err) {
document.getElementById('people').innerHTML = '<li class="text-danger">' + err.message + '</li>';
});
</script>
</body>
</html>
其中url是豆瓣的api
運行結果為:
請求頭以及請求狀態為:
(1)General
#(2)Response
(3)Request
3.很疑惑,請求狀態碼是200,為什麼就是沒有資料回傳而且console還報錯?官方文件上說只要配置好了就可以跨域了,為什麼本機卻實現不了?是配置環節出問題了?還是落下了什麼環節?請相關大牛賜教!在下大三黨一枚,做專案急需解決這個問題,萬分感謝!
解決跨域請求的方法很多,cors方式依賴服務端回傳正確的回應頭資訊
Access-Control-Allow-Origin
,你的截圖顯示豆瓣api並沒有回傳Access-Control-Allow-Origin:*
,所以跨域失敗。還可以使用jsonp解決跨域,豆瓣是支持jsonp的。