jQuery jsonp跨域请求

jQuery jsonp跨域请求

浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

1、什么是同源策略

源就是{协议,主机,端口}定义的。只有这些值完全一样才认为两个资源是同源的。
看个例子:

给出一个对比的URL:http://www.example.com/dir/page.html

jQuery jsonp跨域请求_第1张图片

如果要在js中发起跨域请求,则要进行一些特殊处理了。

解决跨域请求的方式有好几种,这里有博客可以参考:
http://blog.csdn.net/joyhen/article/details/21631833

我这里讲的是jQuery jsonp的跨域请求方式。

2、直接请求不同源的数据

用node.js开启了两个服务,端口不同,属于不同源,3000端口页面中的点击按钮会向4000端口的服务获取数据。
jQuery jsonp跨域请求_第2张图片
ajax请求代码

$.ajax({
            url: 'http://localhost:4000/getInfo',
            type: 'GET',
            dataType: 'json',
            success: function (res) {
                $('.tt').text(JSON.stringify(res));
            }
        }
);

服务端的代码:刚开始学node.js,代码不是很好,见谅哈

var server = http.createServer(function (req, res) {

    var params = url.parse(req.url, true).query;
    var data = {
        'name': 'ddxg',
        'age': '22'
    };
    if (req.method == 'GET' && req.url == '/') {
        res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
        fs.createReadStream(__dirname + '/index.html').pipe(res);
    } else {
        res.writeHead(200, {'Content-Type': 'application/json;charset=utf-8'});
        res.end(JSON.stringify(data));
    }

});

直接点击按钮获取数据的话会报下面的错

jQuery jsonp跨域请求_第3张图片

意思就是:已拦截跨源请求:同源策略禁止读取位于 http://localhost:4000/getInfo 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’)。
需要注意的是:跨域请求是可以发出去的,但是请求响应response被浏览器堵塞了。
查看getInfo这个接口的返回是有数据的。这说明服务端收到了请求并且正常返回数据,但返回的数据被浏览器堵塞了,即使是返回码也无法得到。说明同源政策限制了不同源的读,但不限制不同源的写,

像这种跨域请求,不设置withCredentials为true的话是不会带上本域cookie的。

3、jquery的jsonp方式及其原理

在页面上直接发起一个跨域的ajax请求是不可以的,不过,在页面上引入不同域上的script、img、视频和iframe等是可以的,像图片,只要连接是对的就可以访问。
所以,就可以利用

你可能感兴趣的:(javascript)