ajax跨域

ajax跨域简单来说,就是网站A去调用网站B的数据

但是ajax跨域存在一个问题---浏览器的同源策略,该策略会阻止ajax跨域访问

同源策略(Same origin policy)是一种约定,他是浏览器的一种安全功能

同源:同域名, 同协议, 同端口;不同源则为跨域

例如:

http://www.wxample.com

https://api.wxample.com	不同源	域名不同
http://www.wxample.com	不同源	协议不同
http://www.wxample.com:8080/detail.html	不同源	端口不同
http://api.wxample.com:8080/detail.html	不同源	域名,端口不同
https://api.wxample.com/detail.html	不同源	协议,域名不同
https://www.wxample.com:8080/detail.html	不同源	端口,协议不同
http://www.wxample.com/index.html	同源	只有目录不同

只要看到 ’Access-Control-Allow-Origin‘ 就说明，ajax请求被同源策略限制了。

解决跨域问题有三种方式:

①服务器代理

②cors

③jsonp

jsonp跨域

jsonp(JSON with Padding [带填充的JSON]): 是一种解决ajax跨域问题的方案(padding 填充)

核心思想: 浏览器虽然有同源策略,但是src和href两个属性却可以跨域访问,可以利用这一'漏洞'发送ajax请求

$.ajax方法跨域----jsonp

$.post、$.get、$.ajax都能发送跨域请求,但是 $.get、$.post是要依靠cors方式的, 只有$.ajax能使用jsonp方式

核心:

必须设置请求类型为get ---  type: ‘get’
必须设置dataType为jsonp --- dataType: ‘jsonp’
必须额外设置一个jsonp参数，该参数值可以是任何英文字符串，常用callback。==该函数的作用是在前端自动创建一个以该字符串为名称的函数名==

示例:

$.ajax({
    url: '请求地址',
    type: 'get',   
    dataType: 'jsonp',   
    jsonp: 'callback',  //解决前后端函数名统一的问题   
    success: function(msg){
        alert(msg);
        alert(msg.name);
    }
})

https://blog.****.net/itcats_cn/article/details/82318092

相关推荐