<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>同源策略</title>
</head>
<body>
<input type="file" name="">
<script type="text/javascript">
// https://img1.baidu.com/it/u=2238279918,240829384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=394
/*
同源策略:是客户端脚本(尤其是JavaScript)的一个重要的安全度量标准
同源指的是: 协议, 域名, 端口相同, 一段脚本只能读取来自同一来源的窗口或文档的属性.
http:www.baidu.com ===> https:www.baidu.com 会跨域
www.baidu.com ===> 15.12.03.23
跨域 (CORS)
同源策略带来的问题: ajax在不同域名下的请求无法实现,如果想要请求其他来源的js文件或者json数据, 则需要通过jsonp(json padding json的数据包装)来实现
json是一种数据格式, jsonp不是一种数据格式
jsonp是用来解决跨域获取数据的一种解决方案
`
JSONP 是利用 script 标签的 bug(漏洞), 没有跨域限制的漏洞
1.通过script标签指向一个需要访问的地址 并提供一个回调函数接收返回数据
2.当需要用jsonp解决跨域获取数据时, 只限于 get 请求
*/
</script>
<script type="text/javascript" src="http://124.223.98.197:10086/prod-api/captchaImage?callback=jsonpFunc"></script>
<script type="text/javascript">
function jsonpFunc(url, jsonpCallback, success) {
var script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
script.async = true;
window[jsonpCallback] = function(data) {
success(data)
}
}
jsonpFunc('http://124.223.98.197:10086/prod-api/captchaImage', 'callback', function(value) {
console.log(value)
})
</script>
<!-- 防抖 限流 重绘 回流 -->
</body>
</html>
120-(AJAX)同源策略
最新推荐文章于 2024-07-26 15:05:55 发布