了解跨域资源共享（CORS）的原理与用法

在开发现代 Web 应用程序时，经常会遇到跨域资源共享（Cross-Origin Resource Sharing，CORS）的问题。CORS 是一种浏览器技术，用于允许在一个域中使用来自另一个域的资源。本文将介绍 CORS 的原理和使用方式，帮助您解决跨域问题。

CORS 的原理

在 Web 安全模型中，浏览器强制执行同源策略（Same-Origin Policy），即只允许从相同的源加载资源。如果请求的资源与当前页面的源不同，则会发生跨域错误，浏览器会拒绝加载资源。

CORS 通过引入一组新的 HTTP 头来打破同源策略，这些头部告诉浏览器服务器允许跨域访问资源。CORS 中的请求分为简单请求和非简单请求两种。

简单请求

符合以下条件的请求被认为是简单请求：

使用 GET、POST 或 HEAD 方法
请求头只包含以下几种类型：Accept、Accept-Language、Content-Language、Content-Type（只限于 application/x-www-form-urlencoded、multipart/form-data 和 text/plain）

对于简单请求，浏览器会自动发送一个预检请求（Preflight）OPTIONS，用于询问服务器是否允许跨域访问。服务器必须正确地设置响应头（Access-Control-Allow-*）来授权跨域访问。

如果服务器确认允许跨域访问，浏览器才会发出真正的请求。

非简单请求

对于非简单请求，浏览器需要在真正的请求前发送一个预检请求，验证服务器是否支持跨域访问。

预检请求与实际请求的区别在于使用 OPTIONS 方法发送，并携带实际请求的方法、请求头等信息。服务器收到预检请求后，需要正确地设置响应头以授权跨域访问。

CORS 的用法

CORS 可以在服务端或客户端进行设置。以下是两种常见的设置方式。

服务端设置

在服务端，您可以通过修改 HTTP 响应头来实现 CORS。

Access-Control-Allow-Origin

这个头部指定了响应可以被哪个域进行访问。您可以设置 "*" 表示允许来自所有域的请求，或指定具体的域名。
```
Access-Control-Allow-Origin: *
```
Access-Control-Allow-Methods

这个头部指定了允许的 HTTP 方法。通常，您应该设置 GET、POST 和 OPTIONS。
```
Access-Control-Allow-Methods: GET, POST, OPTIONS
```
Access-Control-Allow-Headers

这个头部指定了允许的请求头。您可以根据您的需要进行设置。
```
Access-Control-Allow-Headers: Content-Type, Authorization
```
Access-Control-Allow-Credentials

如果您的接口需要使用身份验证凭证（如 Cookie、HTTP 认证等），请将这个头部设置为 true。
```
Access-Control-Allow-Credentials: true
```

客户端设置

在客户端代码中，您可以使用 XMLHttpRequest 或 Fetch API 发起跨域请求。

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.withCredentials = true;  // 如果需要携带凭证，请设置为 true
xhr.setRequestHeader('Content-Type', 'application/json');  // 设置请求头
xhr.send();

Fetch API

fetch('http://example.com/data', {
  method: 'GET',
  credentials: 'include',  // 如果需要携带凭证，请设置为 include
  headers: {
    'Content-Type': 'application/json'  // 设置请求头
  }
}).then(response => {
  // 处理响应
});

总结

CORS 是一种解决跨域资源访问的标准，可以通过设置 HTTP 响应头来实现。在服务端，您可以设置相应的头部以授权跨域访问。在客户端，您可以使用 XMLHttpRequest 或 Fetch API 来发起跨域请求。通过使用 CORS，您可以安全地进行跨域资源共享。

希望本文对您理解和使用 CORS 有所帮助。感谢阅读！

本文来自极简博客，作者：幽灵船长，转载请注明原文链接：了解跨域资源共享（CORS）的原理与用法