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

为什么会设置同源策略

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