跨域请求与访问

一、什么是同源策略，什么是跨域

同源 ：在互联网中，两个网络地址的协议，域名，端口号都一致，则表示同源。

同源策略：一种在同源地址之间进行信息交互的方式。

跨域：在某些情况下，需要进行在不同源的网络地址之间进行信息交互。

二、为什么要使用同源策略

在Web中，存在两端，一个是前端（客户端），一个是后端（服务端）。这两端之间，一般是通过网络进行通信。但是在通信中，前端和后端无法确定，和自己正在通信的对方，是不是自己认定的设备。

因为有可能在，前端和后台之间，有一个中间人，他伪装成前端或后端，骗的真正的前端和后端团团转，造成信息泄露，危害信息安全。

这时，如果使用同源策略，在同一个源进行信息交互，而中间人在另外一个源，这样就无法冒充身份，无法攻击。

所以：设置同源限制主要是为了安全，如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取，不同域下DOM任意操作，ajax任意请求的话如果浏览了恶意网站那么就会泄漏这些隐私数据。

三、跨域的意义

既然同源信息交互更加安全，那我们为什么还要费劲心机要进行跨域呢？我们知道互联网开放自由，很多的信息交互涉及不同的机构与组织，所有的信息很难只在同一个源内进行交互。所以进行跨域访问，是必不可少，也是无法避免的问题。

四、如何进行跨域

1.本身允许的跨域：src

在网址资源请求的过程中，比如css，js，imge等网页静态资源的请求。由于只是简单的文件获取，不涉及信息交互的过程。所以对这些内容没有进行跨域的限制。

2.jsonp跨域

由于使用同源策略，导致数据无法跨域交互，但是我们知道script标签是可以进行跨域的。那么我们是不是可以钻一个空子，使用script携带着需要的信息，进行跨域。

其实jsonp跨域，正是利用了script跨域不受限的特点。我们通过页面的js，动态创建一个script标签，并设置src，通过dom操作把这个script加入dom树中。这时浏览器，就会根据src去寻找对应的.js文件。而这个js文件中，就是我们需要的信息。

在页面的js文件中，提前写好一个函数声明。请求的js文件中，就是这个函数的执行。当请求的js下载到本地后，就会马上执行这个函数，这样就可以对请求的数据进行操作了。

function callback(data){
    console.log(data.a);
    //这里对data数据进行操作
}
//写在页面的js文件中

callback({a:5,b:3,c:"abc"});
//这里相当于函数的执行，函数携带的实参就是我们想要的数据
//写在请求的js文件中

3.CORS跨域

我们知道ajax本身是不支持跨域访问的，能不能让ajax可以跨域访问呢？

答案就是使用CORS跨域，这种方式就是给通过，后台返回数据http请求头的一些报文，允许ajax请求。

设置同源策略，就是为了与自己信任的前端进行交互。CORS相当于，我们设置了跨域白名单，相信这个域是安全的，所以可以进行信息交互。说的通俗一点，就是后台设置，允许哪些域可以与自己进行跨域交互。

当前端，发送ajax请求时，前端不知道后台有没有信任自己，所以请求会发出，后台也会收到请求。这时后台会设置返回的http头,设置Access-Control-Allow-Origin属性。表示允许哪个域的访问。

如果，后台返回的http头部允许了，发送请求的域，这时xhr对象，才会携带返回的信息，如果没有允许访问，xhr中将没有发送的信息。（但是实际上，数据已经发送给了前端，从Network中可以看到，但是由于xhr对象是空的，所以发回的数据没法使用）

server.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", 'https://www.baudu.com'); 
    //需要显示设置来源
    next();
});

一般可以将“Access-Control-Allow-Origin”属性设置为“*”，表示任意域名都可以进行访问，但是这种请求方式，无法携带cookie，进行请求。所以建议根据范围限制，或是使用req.headers.origin,动态填充。