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);
}
});
什么是浏览器跨域访问操作,js如何实现
最新推荐文章于 2024-07-22 15:13:59 发布