vue之同源策略
<!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>
