跨域获取服务器数据方式

学习AJAX跨域获取数据碰到这个问题,特此记录。

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

同源是什么?
URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。

为什么需要同源?

假设从一个恶意网站打开支付宝或其他重要的页面(通过window.open),如果没有同源限制,恶意网页上的javascript脚本就可以任意操作你打开的支付宝等网页,这是极其危险的。

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,当你试图请求不同域的资源时,浏览器会发出如下警告。

如果我们真的需要跨域请求,该怎么做呢?

1)很明显,根据浏览器提示,CORS头缺少....这个CORS是什么东西?

跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。

简而言之,CORS就是能实现跨域访问的一种方法。只需要服务器响应头Access-Control-Allow-Origin中含有发起请求的域,就可跨域获取资源。

如图,响应头中Access-Control-Allow-Origin设置为*,意味着所有的域都可以访问该资源。如果是自己的服务器,设置为具体的域即可。

这种方法虽然简单,但需要通过服务器后台进行设置,如果没有权限修改后台数据,就不能获取到数据了。

2)jsonp

jsonp是json数据的一种使用方式。为什么通过jsonp就能跨域请求呢?

在写平常的html中,我们发现,Web页面上调用js文件时是不受跨域的影响,例如调用CDN。不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力(script,img..)。

因此我们可以利用这个特性,设置script标签的src属性为给定数据的URL,当发起请求时,让服务器将数据装入js脚本文件中并返回这个脚本文件,这样客户端就获得了这一段数据。而其中的难点就在于怎样把数据装入js文件中。

它的原理其实是这样的,首先在客户端注册一个回调函数,用来接收返回的数据。然后把函数名字传给服务器。服务器将所需要的数据打包成JSON,通过字符串连接,把传递过来的函数名,JSON数据拼接成函数调用的形式。注意!这是一个js脚本文件,因此当该文件被客户端加载时,会立即执行这个函数,相当于用函数把数据包裹着传递给客户端。

下图代码是通过JSONP从百度获取关键字信息的函数

//keyword为搜索框输入的关键字
    function getJson(keyword)
    {
        //cb为回调处理函数名,wd是输入的关键字,其他参数不用理会
        var url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" +keyword+"&json=1&p=3&cb=jsonCallback";
        var sc = document.createElement(‘script‘);//动态创建script标签
        sc.src=encodeURI(url);                      //引用服务器加载的js代码
        document.body.appendChild(sc);              //添加结点
        sc.remove();                            //执行完毕后马上删除
    }

    //回调处理函数
    function jsonCallback(obj)
    {for(var tmp in obj)
        {
            console.log(result[tmp])
        }

    }

输入关键字"我",发送请求,查看百度服务器响应正文

可以发现它返回的就是一个函数调用,函数名是我们传递给服务器的参数,形参是JSON数据,这段代码返回后会立即执行。

JQuery对jsonp进行了封装,可以通过以下方式调用

//第一种 $.getJSON(url,function(value,status)
        {
            console.log(value);
            console.log(status)
        })

 $.ajax({//第二种
        type: "get",
        async: false,
        url: encodeURI(url),
        dataType: "jsonp",//如果写为json 会生成一个随机的函数名字替换掉URL中第二个?
        jsonp: "cb",//后台定义的回调函数标识符(一般默认为:callback)
         jsonpCallback: "jsonCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
        success: function(data,status){
            console.log(data)
        },
        error: function(){
            alert(‘fail‘);
        }
    });

关于同源策略

除了AJAX XMLHttpRequest请求,存在同源策略的地方还有:跨frame脚本,跨window脚本,cookie访问。

但是Cookie中的同源只关注域名,忽略协议和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的

时间: 2024-11-08 22:21:20

跨域获取服务器数据方式的相关文章

IT忍者神龟之jQuery 使用 $.getJSON() 跨域获取 JSON 数据

假设在服务器上有文件 http://test.unmi.cc/json.php 文件,它的内容为: [代码 1] 01 02 03 04 05 06 07 08 09 10 <?php header('Content-type: application/json'); $user = array (     "name"  => "Unmi",     "blog" => "http://unmi.cc" )

跨域获取json数据

这是天气json的数据,这里是链接,json的数据接口  http://m.weather.com.cn/data/101010100.html json的数据格式 {"weatherinfo":{"city":"北京","city_en":"beijing","date_y":"2014年3月4 日","date":"",&q

jquery的ajax和getJson跨域获取json数据

原文:http://www.cnblogs.com/yqskj/archive/2013/06/12/3133247.html 很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存

【转载1】jquery的ajax和getJson跨域获取json数据

目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端生成script tags至返回至客户端,也就是动态生成javascript标签,通过javascript callback的形式实现数据读取. html代码: 1 $(function(){ 2 3 $("#ww").click(function(){ 4 5 $.ajax({ 6 ty

javascript跨域获取json数据

项目在开发过程中,用到了天气预报的功能,所以需要调用天气预报的api,一开始以为直接用ajax调用url就可以获取天气数据,结果涉及到了跨域的问题,这里做一个记录. 说到跨域,就得知道同源策略. 同源策略(Same origin policy),是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在

ajax跨域获取json数据

一.客户端代码(html+js) Basic/jsonp_test.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>jsonp</title> <script src="js/jquery-1.11.2.js"></script>     <

jquery 跨域获取网页数据

<script language="javascript" src="http://cbsahhs.blog.163.com/jquery.min.js"></script><script language="javascript">function jsonajax() { $.ajax({            type : "GET",            url : "h

使用图片跨域方式获取图片数据 使用 jsonp 方式跨域获取数据

使用图片跨域方式获取图片数据 server.get(`/mockImg`, (req, res, next) => { // 使用图片跨域方式获取图片数据 req.headers.origin && res.setHeader(`Access-Control-Allow-Origin`, req.headers.origin) res.setHeader(`content-type`, `image/gif`) res.setHeader(`data`, `image/gif`) v

利用window.name+iframe跨域获取数据详解

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包