CORS服务端跨域

时间:2022-05-18 05:04:05

 跨域,通常情况下是说在两个不通过的域名下面无法进行正常的通信,或者说是无法获取其他域名下面的数据,这个主要的原因是,浏览器出于安全问题的考虑,采用了同源策略,通过浏览器对JS的限制,防止恶意用户获取非法的数据。比如这样的一个场景,恶意用户仿造一个银行的官网,在用户输入框中嵌套了银行的页面,如果是没有同源策略的限制,那么恶意用户则可以通过这样的一种方法来获取银行用户的卡号和登录密码,这样对于浏览器来说是没有安全性可言的。同时也可以有效的规避了大部分的XSS攻击(XSS攻击原理:通过向用户界面中注入script脚本,然后在脚本中获取用户的token等身份信息,然后将身份信息发送到恶意用户指定的地方,在正常用户还没有推出的时候,也就是token等身份信息还有效的时候,通过这些信息强制登录,将正常用户挤下系统。)

这是网上的说法,简单的说就不同域名、端口号、协议的网站是不能通信的,然而要通信,交换信息,就发生了跨域。

为什么不能通信,这里就得说到同源策略了。

同源策略

 URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。反之就不是同源。简单的说下,这篇文章主要说的是CORS跨域的方法。

本人用的是node.js搭建的简单服务器。

首先我们创建一个文件夹server.js,接下来我们使用 http.createServer() 方法创建服务器,并使用 listen 方法绑定 8888 端口。

函数通过 request, response 参数来接收和响应数据。代码如下

CORS服务端跨域

 

response.setHeader('Access-Control-Allow-Origin','http://localhost:8080');,允许某些来源、某些接口、某些方法以某些形式被跨域调用。
response.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
response.writeHead(200, {'Content-Type': 'json'});//  response.setHeader(name, value)//name响应头的类型,注意这个名字是不区分大小写。 value 响应头的值

  这样我们在cmd里运行我们写的这个服务器

CORS服务端跨域

 

  CORS服务端跨域

我们看到这个服务器成功的搭建了。

然后现在我们来跨域。

CORS服务端跨域

项目中的代码,我就不再开一个服务器专门写了,意思理解了就好。

CORS服务端跨域

 

CORS服务端跨域

 我们成功的跨域拿到了数据。