跨域访问 - 跨域请求 同源策略概念对跨域请求的影响 及几种解决跨域请求的方法如 jsonp

时间:2022-01-26 16:50:46

为什么会设置同源策略

> 适用于浏览器的一种资源访问策略 > 同源策略(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';
}
}