跨域求情问题

226 阅读2分钟

一、什么是跨域

浏览器有同源策略,不允许ajax访问其他域的接口。 同源策略:它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。 举例:当一个浏览器的两个tab页中分别打开来自百度和谷歌的页面,浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。 跨域条件:协议域名端口、有一个不同就算跨域。

二、三个允许跨域加载资源的标签

<img src=xxx>

问题:防盗链,图片的提供方可以做防盗链处理,当检测到不是自己域发来的请求时,会返回指定图片。浏览器本身不会做出限制。 特殊用途:打点统计,统计网站可以是其他域。
例如自己建立的小网站,单独为其设计一套点击量统计系统比较麻烦,就可以使用百度站长统计。其操作方法就是在页面引入一段百度的js,在页面加载时,可以利用img标签向百度服务器发起跨域请求,以此来统计访问量。 优点:img标签没有浏览器兼容性问题 2.

<link href=xxx>

特殊用途:可以使用cdn,cnd也是其他域 3.

<script src=xxx>

特殊用途:可以使用cdn,cdn也是其他域。可以用于jsonp。

三、跨域注意事项

所有的跨域请求都必须经过信息提供方的允许 如果未经许可即可获取,那就是浏览器的同源策略出现了漏洞

四、跨域解决方案

1.jsonp jsonp只支持GET请求,支持老式浏览器,并且可以向不支持CORS的网站请求数据。 例如, 加载www.mysite.com/index.html,服务器端不一定真的有一个index.html文件 服务器可以根据请求动态生成文件后返回 返回的内容格式为如callback({x:100,y:200})

jsonp实现代码 //假设将会返回callback({x:100,y:200}) 2.服务器端设置http header 后端写法举例: response.setHeader("Access-Controll-Allow-Origin","a.com,http://b.com");//…