跨域

跨域

一、同源策略

1、什么是同源策略

同源策略（same-origin policy）是一种出于浏览器安全方面的考虑而出台的一种策略，它可以保证用户信息的安全，防止恶意的网站窃取。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

2、 什么同源？

同源是指：同协议，同域名，同端口

当发送方地址 和 接受方地址，传输协议、域名、端口号 有任意一个不一样。就是触发了同源策略。

二、什么是跨域

由于同源策略的影响，当我们从一个域名的网页去请求另一个域名的资源时，就无法成功获取资源。如果我们要想成功获取资源，那么就要用到跨域。

三、跨域请求解决方案

1、jsonp(前端的解决方案)

利用html标签可以跨域的特点，解决跨域问题。利用script标签，引入外部资源，实现跨域请求。

●script 标签会把请求回来的所有内容当作 js 代码来执行

●script 标签的 src 属性不受同源策略的影响

通过以上两个特点我们使用 script 标签的 src 属性请求一个跨域地址，对应的后端只要返回一段可执行代码。

jsonp的封装：

function jsonp(url,success,data){
    data = data || {};
    let str = "";
    for(var key in data){
        str += `${key}=${data[key]}&`;
    }
    let t = new Date().getTime();
    str = str + "__lxt="+t;
    var script = document.createElement("script");
    script.src = url + "?" + str;
    document.body.appendChild(script);
    window[data[data.fieldName]] = function(res){
        success(res);
    }
}

封装置后的调用形式，如：jsonp(url,success,data)
url：为支持jsonp跨域的请求地址
success：请求的表示成功之后，执行的回调函数
data：要发送给后台的数据，对象形式
其中：
fieldName属性保存的是后台接收的 要执行的函数名所在的字段名
根据后台接收的字段名，将随便写的函数名传给后台。

2、CORS(后台的解决方案)

CORS的全称是跨源资源共享，是一种ajax跨域请求资源的方式。因非同源引起的跨域问题，浏览器就会报错，因为要请求的资源，没有明确允许的头信息， 如果后台明确设置了，允许所有的来源请求就不会被浏览器阻止了。后台设置如下：

# 配置 cors 跨域
header("Access-Control-Allow-Origin:*");
header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');

3、代理

搭建一个服务器，让服务器与服务器之间通讯。所谓的代理就像当客户端A请求服务器B时，A和B不在同一个源内，所以拿不到B中的数据。如果我们在本地，搭建一个服务器C，使用服务器C请求服务器B的数据。 将服务器B的数据拿到服务器C中，因为服务器C和客户端A在同一个源。 所以客户端A就可以间接的拿到服务器B中的数据。