CORS服务端跨域

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

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

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

服务器端需设置以下响应头：

 

Access-Control-Allow-Origin: <origin> | * // 授权的访问源
Access-Control-Max-Age: <delta-seconds> // 预检授权的有效期，单位：秒
Access-Control-Allow-Credentials: true | false // 是否允许携带 Cookie
Access-Control-Allow-Methods: <method>[, <method>]* // 允许的请求动词
Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 额外允许携带的请求头
Access-Control-Expose-Headers: <field-name>[, <field-name>]* // 额外允许访问的响应头

 

我们看到，Access-Control-Allow-Credentials 响应头会使浏览器允许在 Ajax 访问时携带 Cookie，但我们仍然需要对 XMLHttpRequest 设置其 withCredentials 参数，才能实现携带 Cookie 的目标。

 

示例代码如下：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

注意，为了安全，标准里不允许 Access-Control-Allow-Origin: *，必须指定明确的、与请求网页一致的域名。同时，Cookie 依然遵循“同源策略”，只有用目标服务器域名设置的 Cookie 才会上传，而且使用 document.cookie 也无法读取目标服务器域名下的 Cookie。

同源策略

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

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

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

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

 

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

同时满足以下条件：

动词限制，只允许是：

• HEAD
• GET
• POST

请求头限制，只允许出现：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type 且只允许是：
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

 

简单请求浏览器会直接发送该请求，并附加 Origin 头，比如：

Origin: localhost:8080

服务器会返回：

Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Max-Age: 600
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: X-Custom-Header

浏览器在收到服务器返回时，先检查是否允许访问，不允许则直接报错（可用 XMLHttpRequest.onerror 捕获）。

带预检查的 CORS

不满足简单 CORS 要求的请求，在正式请求前，浏览器会发送一次 OPTIONS 动词的请求

例如欲请求 PUT /xxx，想额外发送 X-Custom-Header 头，则会先发送：

OPTIONS /xxx HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: localhost:8080

服务器返回：

HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Max-Age:600
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Vary: Origin

浏览器检查完，一切顺利，才发送真正的请求。