为什么会出现跨域
出于浏览器的同源策略的限制。同源策略就是一种约定,它是浏览器最核心最安全的功能,如果没有它,浏览器的正常功能都会受到影响,也就是说web的构建在同源策略之上的,浏览器只是针对它的一种实现。
什么是跨域
就是当一个请求的协议、域名、端口三者之间有任何一个不同就是跨域
跨域的解决办法
JSONP
JSONP是指JSON Padding,JSONP是一种非官方跨域数据交换协议,由于script的src属性可以跨域请求,所以JSONP利用的就是浏览器的这个“漏洞”,需要通信时,动态的插入一个script标签。请求的地址一般带有一个callback参数,JSONP非常的简单易用,自动补全API利用的就是JSONP。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
1、原声写法
<script>
function addScript(src){
var script = document.createElement("script")
script.src = src;
document.body.appendChild(script)
}
window.onload = function(){
addScript("http://localhost:3000/jsonp?callback=abc")
}
function abc(data){
console.log(data)`
}
2、jquery写法
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
// jquery中的ajax方法封装了jsonp 底层源码就是上面的代码
$.ajax({
type:"GET",
url : "http://localhost:3000/jsonp",
dataType : "jsonp",
success : function(data){
console.log(data)
}
})
}
这里有人会误认为jsonp是一种请求方式,其实是错的,只是jquery底层源码中封装了jsonp原声写法而已。
3、vue写法
this.$http.jsonp('http://localhost:3000/jsonp', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})