什么是跨域资源共享（Cross-Origin Resource Sharing）？
跨域资源共享（CORS）是一种机制，允许网页应用从不同的域名下请求访问资源。当网页应用使用Ajax等方式从一个域名请求数据时，如果这个请求的目标资源不是同源域名下的，那么就会触发浏览器的同源策略，阻止跨域请求。
在同源策略下，浏览器要求请求的目标资源与当前页面有相同的协议、域名和端口。然而，在某些场景下，我们需要跨域请求资源，如前后端分离的网站、跨域API调用等，这时就需要使用CORS来进行跨域资源共享。
CORS的原理是什么？
CORS基于HTTP头部来实现资源的跨域共享。它通过在请求和响应的头部中添加特定的字段，来告诉浏览器当前域名下的资源可以被特定的域名访问。
当浏览器进行跨域请求时，它会先发送一个预检请求（Preflight Request）到目标服务器，询问目标服务器是否接受来自当前域名的请求。预检请求使用的是OPTIONS方法，通过在请求头部中携带特定的字段，比如Origin（当前域名）、Access-Control-Request-Method（请求方法）、Access-Control-Request-Headers（请求头部），来告诉服务器需要哪些权限。服务器在收到预检请求后，会根据这些字段检查是否允许跨域请求，然后返回响应体中的Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等字段，来告诉浏览器当前域名下的资源是否可以被访问。
如果目标服务器允许跨域请求，浏览器会再次发送实际的请求。这个实际请求会携带Origin字段，用于告诉服务器该请求来自哪个域名。服务器通过返回Access-Control-Allow-Origin字段，来告诉浏览器当前域名下的资源可以被访问。
如何配置CORS实现跨域资源共享？
要配置CORS来实现跨域资源共享，可以在服务器端进行配置。以下是一些常用的CORS配置方法：
通过设置响应头实现CORS
在服务器的响应头中添加Access-Control-Allow-Origin字段，用于指定可以访问资源的域名。例如，配置允许所有域名访问资源的响应头为：
Access-Control-Allow-Origin: *
这样，任何域名都可以跨域请求该资源。
通过设置请求头实现CORS
在客户端发送请求时，通过设置请求头的Origin字段，告诉服务器该请求来自哪个域名。例如，添加以下请求头：
Origin: http://www.example.com
服务器收到请求后，根据该字段判断是否允许该跨域请求，并在响应头中添加Access-Control-Allow-Origin字段，来告诉浏览器当前域名下的资源可以被访问。
通过配置服务器实现CORS
根据服务器的不同，还可以通过配置服务器来实现CORS。例如，对于Node.js服务器，可以使用cors模块进行配置。通过设置相应的选项，可以指定允许的域名、请求方法、请求头部等。以下是使用Node.js的cors模块进行CORS配置的示例代码：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'http://www.example.com',
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type'],
}));
// 其他路由处理代码...
通过上述配置，服务器可以允许来自http://www.example.com的GET和POST请求，且只接受包含Content-Type请求头部的请求。
总结
CORS是一种通过在请求和响应头部中添加特定字段实现网站跨域资源共享的机制。它允许服务器配置访问资源的域名，从而允许前端应用在浏览器中跨域请求资源。通过设置响应头或请求头，或配置服务器，可以实现CORS并解决跨域请求的问题。
本文来自极简博客，作者：冰山美人，转载请注明原文链接：了解网站跨域资源共享的原理
