什么是浏览器跨域访问操作,js如何实现

1.同源策略
	出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是
	浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可
	能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源
	策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容
	进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol)
	主机(host)和端口号

2.跨域
	违反同源策略
	当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
	列如:
		http://www.lihui.com:80/index.html
	    协议: http/https/...
	    一级域名: lihui.com/itzb.com
	    二级域名: www/study/edu/...
	    端口号: 80/3306/...1)协议+一级域名+二级域名+端口号都相同, 所以同源
	    http://www.lihui.com:80/index.html
	    http://www.lihui.com:80/detail.html

    (2)协议不同, 所以不同源, 是跨域
	    http://www.lihui.com:80/index.html
	    https://www.lihui.com:80/index.html

    (3)一级域名不同, 所以不同源, 是跨域
	    http://www.lihui.com:80/index.html
	    http://www.itzb.com:80/index.html

    (4)二级域名不同, 所以不同源, 是跨域
	    http://www.lihui.com:80/index.html
	    http://edu.lihui.com:80/index.html

    (5)端口号不同, 所以不同源, 是跨域
	    http://www.lihui.com:80/index.html
	    http://www.lihui.com:8090/index.html

3.同源策略带来的影响
    在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据
    但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在
    不同服务器上的,这时如果再通过Ajax请求数据就会拿不到跨域数据

4.浏览器跨域访问
	在违反同源策略的条件下,通过一些手段或方式请求数据并且获得跨域数据
	
5.跨域解决方案
    jsonp
    document.domain+iframe
    location.hash + iframe
    window.name + iframe
    window.postMessage
    flash等第三方插件
    列如js中使用ajax的jsonp方式
     /*
    当前网页的地址: http://127.0.0.1:63342/jQuery/Ajax/22-jQuery%E4%B8%ADjsonp%E4%BD%BF%E7%94%A8.html
    当前资源的地址: http://127.0.0.1:80/jQuery/Ajax/22-jsonp.php
    */
    $.ajax({
        url: "http://127.0.0.1:80/jQuery/Ajax/22-jsonp.php",
        data:{
            "teacher": "lnj",
            "age": 34
        },
        dataType: "jsonp", // 需要请求跨域的数据
        jsonp: "cb",  // 服务器在获取回调函数名称的时候需要用什么key来获取
        jsonpCallback: "lnj", // 服务器在获取回调函数名称的时候回调函数的名称是什么
        success: function (msg) {
            console.log(msg);
        }
    });
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值