ajax 跨域请求报错,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请求，这也是它能解决跨域的原因。但是这样的话异步啊什么的都干不了了。