<!doctype html>
vue之同源策略
vue請求方式(axios)
axios.get('資源服務器'，{
params:{ //get參數 如https：//www.badu.comid=(參數)
id:參數
}
}).then(function(response){ //response是請求成功后返回的數據
console.log(response)
}).catch(function(error){ //error是請求失敗后的返回數據
console.log(error) //無法顯示服務端的錯誤，只會接收服務端的錯誤
})
同源策略報錯
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
只要出現這個錯誤，就是訪問受限。出現策略的攔截問題
同源策略報錯解決方式
同源策略：是瀏覽器的一種保護用戶數據的一種安全機制，瀏覽器會限制ajax不能跨域訪問其他源的數據地址。
同源：判斷兩個同心地址之間，是否協議，域名[ip]，端口一致
同源策略報錯原因也是協議，域名和端口有其一不一致的問題
解決方式
ajax跨域(跨源)方案之CORS
CORS是一個W3C標准，全稱是"跨域資源共享"，他允許瀏覽器向跨源的后端服務器發出ajax請求，從而克服ajax只能同源使用的限制
實現CORS主要依靠后端服務器中相應數據中在響應頭信息返回信息的
CORS在django中的使用
#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 #
vue中設置
待更新
jsonp
利用跨域標簽來解決的
jsonp可以實現跨域，但是並非ajax技術
核心是利用script標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" id="content"> <button onclick="get_data()">翻譯</button> <p id="p1"></p> </div> <script> // jsonp本身並不是ajax // jsonp利用的是script標簽的本身特性 // 實現json需要客戶端和服務端配合 function hello(data){ // 自定義業務 //當點擊之后，發送請求服務器，js會自動調用這個函數(函數名必須和請求連接中的callback參數一致，傳入的參數就是請求響應的參數) var p1 = document.getElementById("p1"); p1.innerHTML = data.data; console.log(data); }function get_data(){ // 通過js的DOM操作創建一個script標簽 var script = document.createElement("script"); var content = document.getElementById("content"); // 給script標簽設置src屬性為服務端的js腳本 script.src = "https://api.asilu.com/fanyi/?callback=hello&q="+content.value; console.log(script); // 把新建的script標簽追加到網頁給瀏覽器識別 //通過將處理好的script標簽交給document的head處理，讓瀏覽器識別 document.head.append(script); } </script>
</body>
</html>