跨域监听 iframe src_跨域的几种实现方式|精选博客

一、背景

同源策略

同源策略可以理解为浏览器的一种安全机制，浏览器只允许与本域下的接口进行交互。不同源的客户端在没有明确授权的情况下，不能读写服务端的资源。

什么是不同源呢：

• 不同的协议 例:http/https

• 不同的域名

• 不同的端口

• 不同的二级域名 例:http://a.baidu.com、http://b.baidu.com(不然哪来的降域呢)

补充点

在出现跨域问题时，浏览器究竟在哪一步进行了拦截？客户端请求时？服务器不做出响应？还是服务器响应后浏览器拒绝的响应？？

image.png

image.png

测试发现，在客户端和服务端不同源的情况下，服务端其实是有响应的，在此时是浏览器的同源策略拒绝了响应，认为这样不安全。

二、解决跨域问题

1. JSONP(JSON with Padding)

• 原理： 在HTML中用script标签在加载其他域下的js，那么JSON就是利用这一特性来请求服务端，从而避免了ajax请求出现的跨域问题

• 具体实施

(1) 定义数据处理函数_fun

(2) 创建script标签，并添加src地址来请求服务端接口，在src尾端加上自定义参数callback=_fun

(3) 服务端收到请求后，根据get参数判断返回拼接的字符串：'_fun(data)'

(4) fun(data)会放到script标签作为js执行，那么此时就会调用fun函数，将data作为函数的参数

• 相应代码

客户端：

获取天气<