为什么会设置同源策略
> 适用于浏览器的一种资源访问策略 > 同源策略(Same origin policy)是一种约定,它是浏览器最核 心也最
基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受 到影响。可以说Web是构建在同源策略基 础之上的
,浏览器只是针对同源策略的一种实现。
浏览器为什么使用同源策略
- 同源策略,它是由Netscape提出的一个著名的安全策略。 - 现在所有支持 JavaScript 的浏览器都会使用这个策略。 - 所谓同源是指,域名/IP/主机,协议,端口相同。
- 在浏览器的js中,通过代码(脚本)去访问网络资源的时候会应用该策略 假设在a页面的地址是(http://www.baidu.com/a.html),那么a页面所在的源信息是:协议:http,域名:baidu.com, 端口:80,那么在这个页面中通过js去访问另外一个资源:(http://www.baidu.com/b.html),那么这个时候会使用同源策略进行检测,上面两个页面的协议、域名、端口 是相同的,那么这时候一个同源请求,如果访问的是:(http://www.qq.com/b.html),那么很明显这个时候就是非同源请 求,这个时候,请求会受到一定的限制。 以 http://www.baidu.com/a.html 为例,以下都是非同源的: - http://www.qq.com/b.html - http://www.baidu.com:8080/b.html - http://baike.baidu.com/b.html - https://www.baidu.com/b.html - http://baidu.com/b.html 注意:www其实也是一个二级子域名,只是习惯把www和顶级域名绑定在一起去使用而已 我们使用ajax去请求资源的时候,就被使用同源策略进行检测 同源策略是适用于浏览器的,也就是说如果我们发送了一个跨域的请求,服务器是能接收到并能处理和返回的,但是浏览器在接收到返回数据以后,会比较他们的域是否相同,如果不相同,拒绝接收和处理!
解决
- 设置一个特有的头信息:Access-Control-Allow-Origin,当浏览器接收到非同源数据的时候,会首先去头信息看Access-Control-Allow-Origin字段里 面的值,如果当前域在Access-Control-Allow-Origin里面有包含,则忽略同源策略 - 后端代理,因为后端是不受限于同源策略的,所以,我们可以让我们的后端去访问非同源的资源,然后我们去访问我们的后端,我们把自己的后端作为一个代理 - flash代理:和后端代理类似 ActionScript
主要使用方法JSONP
jsonp的方法的概述 在html标签中 有些标签引用文件是不会受同源策略的影响。所以我们可以用script标签来引用不同域的文件 所以我们可以创建一个script标签 然后向其中的src中添加要拿去的文件地址如 var scriptElement = document.createElement('script'); scriptElement.src = 'https://suggest.taobao.com/sug?code=utf-8&q='+this.value+'&callback=miaov'; 这其中的code=utf-8&q='+this.value q后的值表示要搜索的参数 要添加code=utf-8这个编码不然不识别中文 callback=miaov';这个可以在后面添加加 如下的名为miaov的函数 具体的操作搜索jsonp function miaov(data) { if (data.result.length) { ul.style.display = 'block'; let html = ''; data.result.forEach(item => { html += '<li><a target="_blank" href="https://s.taobao.com/search?q='+item[0]+'">'+ item[0] +'</a></li>' }); ul.innerHTML = html; } else { ul.style.display = 'none'; } }