CORS - 是客户端、服务器端还是传输层 [复制]

服务器

CORS（跨源资源共享）是一种用于解决浏览器端跨域访问的机制。它允许服务器在响应中添加一些额外的HTTP头信息，告诉浏览器是否允许当前页面进行跨域请求。CORS机制涉及到客户端、服务器端以及传输层，下面将详细介绍。

客户端

在客户端，也就是浏览器端，当发起一个跨域请求时，浏览器会首先发送一个预检请求（OPTIONS请求）给服务器，以确定服务器是否允许当前页面的跨域请求。预检请求中会带上一些额外的头信息，比如Origin（请求来源）、Access-Control-Request-Method（请求方法）等。服务器根据这些信息来判断是否允许该跨域请求。

服务器端

在服务器端，当收到一个跨域请求时，服务器需要对该请求进行处理。首先，服务器需要在响应中添加一些头信息，告诉浏览器是否允许当前页面进行跨域请求。这些头信息包括Access-Control-Allow-Origin（允许的请求来源）、Access-Control-Allow-Methods（允许的请求方法）等。服务器需要根据请求的情况来动态生成这些头信息。

传输层

CORS机制涉及到传输层的一些规范，比如HTTP协议中的OPTIONS请求方法。OPTIONS请求方法用于在实际请求之前，询问服务器目前允许的请求方法。通过发送一个OPTIONS请求给服务器，可以获得服务器返回的头信息，从而确定是否允许当前页面进行跨域请求。

案例代码

下面是一个使用CORS机制的案例代码，展示了如何在客户端和服务器端进行相应的设置和处理。

客户端代码：

Javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/JSon");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

服务器端代码（Node.JS）：

Javascript
var express = require('express');
var app = express();
app.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  next();
});
app.get('/data', function(req, res) {
  var data = {
    name: "John Doe",
    age: 25,
    emAIl: "johndoe@example.com"
  };
  res.JSon(data);
});
app.listen(3000, function() {
  console.log("Server is running on port 3000");
});

以上代码展示了一个简单的跨域请求示例。在客户端代码中，使用XMLHttpRequest对象发送一个GET请求到服务器端。在服务器端代码中，使用Express框架设置了一些响应头信息，允许所有来源的请求访问。当客户端发送请求时，服务器将返回一个包含用户数据的JSON响应。

CORS机制是一种用于解决浏览器端跨域访问的机制，涉及到客户端、服务器端以及传输层。通过在服务器的响应中添加一些头信息，可以告诉浏览器是否允许当前页面进行跨域请求。使用CORS机制，我们可以安全地实现跨域数据的传输和访问。