4. 通過axios實現數據請求
4.2.4 同源策略
同源策略，是瀏覽器為了保護用戶信息安全的一種安全機制。所謂的同源就是指代通信的兩個地址（例如服務端接口地址與瀏覽器客戶端頁面地址）之間比較，是否協議、域名(IP)和端口相同。不同源的客戶端腳本[javascript]在沒有明確授權的情況下，沒有權限讀寫對方信息。
ajax本質上還是javascript，是運行在瀏覽器中的腳本語言，所以會被受到瀏覽器的同源策略所限制。
前端地址：http://www.oldboy.cn/index.html |
是否同源 | 原因 |
|---|---|---|
http://www.oldboy.cn/user/login.html |
是 | 協議、域名、端口相同 |
http://www.oldboy.cn/about.html |
是 | 協議、域名、端口相同 |
https://www.oldboy.cn/user/login.html |
否 | 協議不同 ( https和http ) |
http:/www.oldboy.cn:5000/user/login.html |
否 | 端口 不同( 5000和80) |
http://bbs.oldboy.cn/user/login.html |
否 | 域名不同 ( bbs和www ) |
同源策略針對ajax的攔截，代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="get_music">點擊獲取天氣</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{},
methods:{
get_music(){
axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中國心")
.then(response=>{
console.log(response);
}).catch(error=>{
console.log(error.response)
});
}
}
})
</script>
</body>
</html>
上面代碼運行錯誤如下：
Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
上面錯誤，關鍵詞：Access-Control-Allow-Origin
只要出現這個關鍵詞，就是訪問受限。出現同源策略的攔截問題。
為什么天氣接口能夠突破同源策略獲取 數據，而歌曲接口不能獲取數據反而報錯，
原因： 天氣接口的服務端那邊允許我們客戶端這邊跨域獲取數據，天氣接口的服務端實現了CORS授權。
4.2.5 ajax跨域(跨源)方案之CORS
ajax跨域(跨源)方案：后端授權[CORS]，jsonp，服務端代理
CORS是一個W3C標准，全稱是"跨域資源共享"，它允許瀏覽器向跨源的后端服務器發出ajax請求，從而克服了AJAX只能同源使用的限制。
實現CORS主要依靠后端服務器中響應數據中在響應頭信息返回授權信息的。
django的視圖
def post(request):
response = new HttpResponse()
response .set_header("Access-Control-Allow-Origin","http://localhost:63342")
return response;
// 在響應行信息里面設置以下內容：
Access-Control-Allow-Origin: ajax所在的域名地址
Access-Control-Allow-Origin: www.oldboy.cn # 表示只允許www.oldboy.cn域名的客戶端的ajax跨域訪問
// * 表示任意源，表示允許任意源下的客戶端的ajax都可以訪問當前服務端信息
Access-Control-Allow-Origin: *
總結：
0. 同源策略：瀏覽器的一種保護用戶數據的一種安全機制。
瀏覽器會限制ajax不能跨源訪問其他源的數據地址。
同源：判斷兩個通信的地址之間，是否協議，域名[IP]，端口一致。
ajax： http://127.0.0.1/index.html
api數據接口： http://localhost/index
這兩個是同源么？不是同源的。是否同源的判斷依據不會根據電腦來判斷，而是通過協議、域名、端口的字符串是否來判斷。
1. ajax默認情況下會受到同源策略的影響，一旦受到影響會報錯誤如下：
No 'Access-Control-Allow-Origin' header is present on the requested resource
2. 解決ajax只能同源訪問數據接口的方式：
1. CORS，跨域資源共享，在服務端的響應行中設置：
Access-Control-Allow-Origin: 允許訪問的域名地址
2. jsonp 利用跨域標簽來解決
3. 是否服務端代理
思路：通過python來請求對應的服務器接口，獲取到數據以后，