jsonp解决跨域问题

跨域

　　由于浏览器对javascript的同源策略的限制，例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

同源策略

　　同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

实现跨域的方法

　　通过jsonp实现跨域

　　jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

一个是描述信息的格式，一个是信息传递双方约定的方法。

　　jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

4.而json又是一个轻量级的数据格式,还被js原生支持

5.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

　　（1）jquery的jsonp方式跨域请求

$(function(){
　　　　　　var name='cc';
　　　　　　var looks='handsome';
　　　　　　$.ajax({

　　　　　　　　　　　　url: "http://localhost:9090/student",
                    type: "GET",
　　　　　　　　　　　　data：{
　　　　　　　　　　　　　　name:name,
　　　　　　　　　　　　　　looks:looks
　　　　　　　　　　　　},
　　　　　　　　　　　　cache:false,　
                    dataType: "jsonp",  //指定服务器返回的数据类型
　　　　　　　　　　　　jsonp:'theFunction',//用以获得jsonp回调函数名的参数名(默认为:callback)
　　　　
　　　　　　　　　　　　jsonpCallback: "showData", //指定回调函数名称

　　　　　　　　　　　　success: function (data) { 
　　　　　　　　　　　　　　　　console.info("调用success"); }
　　　　　　　　　　 });

})

jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。

　　（2）基于script标签实现跨域

凡是拥有src这个属性的标签都可以跨域例如<script><img><iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var message = function(data) {
        alert(data[1].title);
    };
</script>

<script type="text/javascript" src="http://web.cn/js/message.js"></script>
</head>
<body>
<div id='testdiv'></div>
</body>
</html>

　　（3）vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})

posted on 2018-07-27 14:53 小&与阅读(3287) 评论(0) 编辑收藏举报