浏览器安全策略：同源策略（跨域）

最新推荐文章于 2022-12-02 18:39:51 发布

bling flower

最新推荐文章于 2022-12-02 18:39:51 发布

阅读量410

点赞数

本文链接：https://blog.csdn.net/C05230/article/details/108665613

版权

问题描述：
在这里插入图片描述

原因：我们设置的是http://47.106.244.1/student.json
而却是用file协议请求的file:...index.html

在这里插入图片描述

上述错误就是同源策略问题
同源策略：

浏览器安全策略
	限制：
		请求：
			协议名称
			ip地址
			端口号

下述三种情况都会报同源策略问题

http://www.test.com
https://www.test.com
报错原因：协议不同

http://www.test.com
http://www.test1.com
报错原因：ip地址不同

http://47.100.76.121:80/test
http://47.100.76.121:8888/test
报错原因：端口号不同

解决方案：
	1.后台代码添加允许任意域名/ip/端口访问
	2.jsonp
		html中所有带有src属性的标签都可以跨域访问
					dataType:'jsonp',
	            	jsonpCallback:'getData',
		img
		iframe：框架
		script：
			src

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./demo/tab/jquery-3.5.0.min.js"></script>
    <script>
        // function getData(data){
        //     console.log(data);
        // }
        $.ajax({
            type:'GET',
            url:'http://182.92.83.218/串讲/student.js',
            dataType:'jsonp',
            jsonpCallback:'getData',
            success:function(data){
                console.log(data);
            }
        })
    </script>
    <!-- <script src="http://182.92.83.218/串讲/student.js?callback=getData"></script> -->
</head>
<body>
    
</body>
</html>

bling flower

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器安全策略：同源策略（跨域）

问题描述：原因：我们设置的是http://47.106.244.1/student.json而却是用file协议请求的file:...index.html上述错误就是同源策略问题同源策略：浏览器安全策略限制：请求：协议名称 ip地址端口号下述三种情况都会报同源策略问题http://www.test.comhttps://www.test.com报错原因：协议不同http://www.test.comhttp://www.test1.com报错
复制链接

扫一扫