ajax跨域请求问题

1.localhost：8081/index/test.html页面

function get1(){
$.getJson('localhost：8080/index/get1').then(function(res){
  console.log(res);
})
}

这个请求的结果是，在network上请求成功200，但是控制台会报错

2.为什么会出现跨域
a):浏览器限制
服务器本身是不会阻碍跨域请求的，是浏览器处于安全考虑阻止了这种不安全的跨域请求
b):跨域
域名，端口，协议名任何一个不同就是跨域
c）：XHR（XMLHttpRequest）请求
如果不是用XHR（XMLHttpRequest）形式来请求，就算是跨域，浏览器也不会报错。
所以说只有同时满足以上才有跨域请求

3.那我们怎么解决跨域问题就从以上三点开始突破
a）：设置浏览器安全系数级别放低。

image.png

b）：jsonp
前台写一个这样的jsonp请求

$.ajax(function(){
    url:"test/get1",
    dataType:"jsonp",
    success:funcion(res){
          console.log(res);
}
})

但是呢依然报错
所以我们还是要改一下服务器后台代码，需要一个callback

普通的ajax请求和jsonp请求的区别

image.png

1.请求类型是不一样的，xhr和script
2.返回类型不同。普通返回json对象，jsonp返回js脚本
3.jsonp后面带一个callback，json对象是作为参数放在callback方法中的。
而“callback”是前后台约定的返回方法名，如果不对应的话就是普通请求了

$.ajax(function(){
    url:"test/get1",
    dataType:"jsonp",
    jsonp:"callback2",//不写的话默认是callback
    chache：true，//请求可以被缓存
    success:funcion(res){
          console.log(res);
}
})

callback&=15785930958395045
在后面的这一长段随机数是为防止请求被缓存

image.png

那jsonp的弊端是什么呢？
jsonp是前台和后台之间的一种约定，服务器如果发现是jsonp请求的话就会把返回的值有原来的json对象改为js代码，js代码的函数名是callback的函数值，它的函数的参数是原来要返回的json对象

1).是需要后台进行改动的，加入后台不是团队内部就。。。
2).只支持get请求
3).发送的不是xhr请求，这也是它能解决跨域的原因。但是这样的话异步啊什么的都干不了了。