跨域问题

最新推荐文章于 2024-04-19 22:59:19 发布

ws Android

最新推荐文章于 2024-04-19 22:59:19 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/weixin_46685538/article/details/107704568

版权

文章目录

问题的由来
跨域的理解
跨域的处理
1.cors
- 2.jsonp

问题的由来

现代浏览器为了安全,做了一个同源限制.就是所谓的同源安全策略
如果网络上的接口可以不受限制的被任意人调用.那将是一个非常混乱的场景.
所以,为了防止这种情况,浏览器做了这个同源策略来防止这种情况发生

如果是跨域请求，未处理，浏览器会劫持服务器响应的数据。

跨域的理解

跨域指的是,A网站内部向B网站发送一个AJAX请求.
由于浏览器有同源策略的限制,默认情况下,是不允许 A网站向 B 网站请求数据资源的
例：http://my.website.com/ ---> http://your.website.com/ 是不允许的 主机名不同

XMLHttpRequest 下的 AJAX 请求:
协议相同 + 域名相同 + 端口号相同
浏览器才认为是同一个网站.
才不同受到同源策略的影响.
才可以正常的发送 AJAX 请求.
其他情况下,发送 AJAX 请求,都属于跨域

**注意：
  同源策略是浏览器实现的，与后台服务器无关。
  a网站发送请求到了b网站的后台，b服务器收到数据后会向a网站返回，
  到浏览器之后，浏览器会劫持这个数据，不让a网站使用。
  
  
为什么要跨域?
因为当一个项目变大时,把所有的内容都丢在一个网站或者是后台服务器中是不现实的

跨域的处理

1.cors

cors 是 Cross-Origin-Resource-Sharing 的缩写.
也是现代浏览器普遍支持的一种非常方便的跨域方案

浏览器在检测到你发送的 ajax 请求不是同源请求时,会自动在 http 的头部添加一个 origin 字段
//设置响应头 告诉浏览器，不管来自哪里的请求，我认为都可以，你浏览器，不要拦截我响应给人家的数据
        response.setHeader("Access-Control-Allow-Origin","*");

2.jsonp

JSONP 请求的原理就是利用某些标签不受浏览器同源策略的限制 比如 script标签 img  link 
JSONP 这种方式，只支持GET请求

原生jsonp请求
//注意：回调函数的script标签定义在请求接口的script标签的前面
<script type="text/javascript">
            //回调函数名
			function getJsonData(data){
				alert(data.province)
			}
		</script>

<script type="text/javascript"src="https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?callback=getJsonData&tel=18309221945">
		
</script>
参数：
   callback=getJsonData  告诉服务器，前台的一个接受后台响应数据时的一个回调函数名
   callback 这个键名：是大家约定俗称的，就不要乱改
   
   后台JSONP方式响应的数据 把JSON数据塞入回调函数中 统一返回
		getJsonData({
		    mts:'1325914',
		    province:'陕西',
		    catName:'中国联通',
		    telString:'13259141515',
			areaVid:'30503',
			ispVid:'137815084',
			carrier:'陕西联通'
		})

###JQuery封装后的JSONP请求
	<body>
		<button type="button">请求</button>
		<script type="text/javascript">
			function getJsonData(data){
				alert(data.province)
			}
		</script>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			$.ajax({
				type:"GET",
				url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
				data:{
					tel:'18309221945'
				},
				success:function(data){
					alert(data.province)
				},
				jsonp:"callback", //回调函数名，是Jquery随机生成，当然可以指定回调函数名
				jsonpCallback:'getJsonData',//指定回调函数
				dataType:"jsonp"
			})
		})
	</script>

###JQuery封装后的JSONP请求的简化写法
<body>
		<button type="button">请求</button>
</body>
	<script type="text/javascript">
		$('button').click(function(){
			//callback=?  ?问号的意思就是随机生成回调函数
			$.getJSON("https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?callback=?&tel=18309221945",function(data){
				alert(data.province)
			})
		})
	</script>

ws Android

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨域问题

文章目录问题的由来跨域的理解跨域的处理1.cors2.jsonp问题的由来现代浏览器为了安全,做了一个同源限制.就是所谓的同源安全策略如果网络上的接口可以不受限制的被任意人调用.那将是一个非常混乱的场景.所以,为了防止这种情况,浏览器做了这个同源策略来防止这种情况发生如果是跨域请求，未处理，浏览器会劫持服务器响应的数据。跨域的理解跨域指的是,A网站内部向B网站发送一个AJAX请求.由于浏览器有同源策略的限制,默认情况下,是不允许 A网站向 B 网站请求数据资源的例：http://my.
复制链接

扫一扫