zoukankan      html  css  js  c++  java
  • 跨域详解

    1.什么是跨域

    举个例子:

    如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容
    如果A网站与B网站不在同一个域中,不能直接通过简单的Ajax(一定是脚本的形式不能跨越,别的方式还是可以获取的,比如script引入和iframe引入等等可以跨越)来获取B站的信息,那么就出现了跨域访问问题。浏览器做了限制。

    浏览器有同源策略的限制。所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:

    http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域)

    http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

    http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

    http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

    http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

    请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

    一个窗体下的iframe不同也是存在跨域的。

    2.为什么限制跨域

    安全性

    3.Ajax(脚本的形式)如何解决跨越限制

    (1)通过JSONP的形式(常用的解决方案,但是只适用于GET请求)

    在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。

    比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样:

    QQ截图20130613230631

    我们看到获取数据的地址后面还有一个callback参数,按惯例是用这个参数名,但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的,就得按照提供数据的那一方的规定格式来操作了。

    因为是当做一个js文件来引入的,所以http://example.com/data.php返回的必须是一个能执行的js文件,所以这个页面的php代码可能是这样的:

    QQ截图20130613230631

    最终那个页面输出的结果是:

    QQ截图20130613230631

    所以通过http://example.com/data.php?callback=dosomething得到的js文件,就是我们之前定义的dosomething函数,并且它的参数就是我们需要的json数据,这样我们就跨域获得了我们需要的数据。

    这样jsonp的原理就很清楚了,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

    知道jsonp跨域的原理后我们就可以用js动态生成script标签来进行跨域操作了,而不用特意的手动的书写那些script标签。如果你的页面使用jquery,那么通过它封装的方法就能很方便的来进行jsonp操作了。

    QQ截图20130613230631

    原理是一样的,只不过我们不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。

    (2)服务器代理

    例如www.123.com/index.html需要调用www.456.com/server.php,可以写一个接口www.123.com/server.php,由这个接口在后端去调用www.456.com/server.php并拿到返回值,然后再返回给index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。

    (3)Access Control

    header("Access-Control-Allow-Origin: http://www.baidu.com");//表示允许baidu.com跨域请求本文件  

    或者

    header('Access-Control-Allow-Origin:*');//允许所有来源访问

    header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

    还有一些其他的前端措施在这展开可以参照一下博客:

    http://www.cnblogs.com/2050/p/3191744.html

    http://blog.csdn.net/kongjiea/article/details/44201021

  • 相关阅读:
    (Java实现) 洛谷 P1603 斯诺登的密码
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1553 数字反转(升级版)
    8.4 确定两个日期之间的月份数或年数
    (Java实现) 洛谷 P1553 数字反转(升级版)
  • 原文地址:https://www.cnblogs.com/nele/p/7163846.html
Copyright © 2011-2022 走看看