WHAT - http headers 介绍（含 CORS 配置）

http header？

HTTP headers let the client and the server pass additional information with an HTTP request or response.

http header 类型？

• general headers
• request headers
• response header
• entity headers

http general headers？

A general header is an http header that can be used in both request and response message but doesn’t apply to the content itself.

Depending on the context they are used in, general headers are either request or response headers. However, they are not entity headers.

以下是一些常见的 HTTP 通用头：

1. Cache-Control（缓存控制）： 控制缓存的行为，例如缓存有效期、是否允许缓存、是否允许重新验证等。
2. Connection（连接）： 指定与连接相关的选项，例如keep-alive，close等。
3. Date（日期）： 消息创建的日期和时间。
4. Pragma（特定于实现的头）： 用于向后兼容的HTTP/1.0缓存控制。
5. Trailer（报头字段）： 指定在消息主体后面包含的报头列表，通常在使用分块传输编码时使用。
6. Transfer-Encoding（传输编码）： 指定消息主体的传输编码方式，如chunked。
7. Upgrade（升级）： 用于协商更高版本的协议。
8. Via（途经）： 标识了消息经过的代理服务器。
9. Warning（警告）： 包含与消息相关的警告信息。

http request headers？

a request header is an http header that can be used in an http request, and that doesn’t relate to the content of the message.

Request headers like Accept, Accept-\*, or if-\* allow to perform conditional requests; other like Cookie, User-Agent or Referer precise the context so that the server can tailor the answer.

以下是常见的 HTTP 请求头列表：

1. Accept（接受）： 指定客户端能够处理的媒体类型及其相对优先级。
2. Accept-Encoding（接受编码）： 指定客户端支持的内容编码方式，如gzip、deflate、br等。
3. Accept-Language（接受语言）： 指定客户端接受的自然语言类型及其相对优先级。
4. Authorization（授权）： 包含用于进行身份验证的凭据信息，如用户名和密码。
5. Cookie（Cookie）： 包含来自服务器的先前请求中设置的Cookie信息。
6. Host（主机）： 指定要访问的目标服务器的主机名和端口号。
7. User-Agent（用户代理）： 包含了客户端的应用程序类型、操作系统、软件版本等信息。
8. Referer（引用页）： 指定了当前请求是从哪个URL页面跳转过来的。
9. Content-Type（内容类型）： 指定了请求或响应中的实体主体的MIME类型。

CORS？cross-origin resource sharing？跨域资源共享？http request headers 和浏览器同源策略限制跨域资源共享的关系？

为了提高安全性，浏览器添加了同源策略来限制跨域访问，但与此同时降低了开发的灵活性。为此，浏览器提供了折中方法，即只要遵循 CORS protocol，跨域也可访问。

在跨源HTTP请求中，浏览器执行的请求可以分为两种类型：简单请求（simple request）和预检请求（preflighted request）。

1. 简单请求（Simple Request）：

simple request that is always considered authorized and is not explicitly listed in responses to preflight requests.

简单请求是指满足以下所有条件的HTTP请求：

• 请求方法是以下之一：GET、HEAD、POST。
• 请求头仅限于以下几种字段：Accept、Accept-Language、Content-Language、Content-Type（仅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）。
• 请求中的任何XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象是用于监视从客户端到服务器的数据上传的。
• 请求中没有使用 ReadableStream 对象。

简单请求不会触发CORS预检（Cross-Origin Resource Sharing Preflight），浏览器会直接发送请求到服务器，并根据服务器返回的响应进行处理。

2. 预检请求（Preflighted Request）：

预检请求是指满足以下任一条件的HTTP请求：

• 使用了诸如PUT、DELETE等非简单方法。
• 使用了自定义请求头（例如，Content-Type 为 application/json）。

在发送真正的跨源请求之前，浏览器会先发送一个OPTIONS请求（称为预检请求），以确定服务器是否允许该跨源请求。

预检请求包含一组特殊的头部字段，如Origin、Access-Control-Request-Method、Access-Control-Request-Headers，服务器接收到预检请求后，通过检查这些头部字段来决定是否允许实际的跨源请求。如果服务器确认允许该跨源请求，浏览器会发送实际的请求到服务器。

通过区分简单请求和预检请求，浏览器能够更有效地管理跨源HTTP请求，确保安全性和一致性。

注意，OPTIONS 请求一般成功会返回 204 状态码，表示无内容，服务器成功处理，但未返回内容。

CORS？cross-origin resource sharing？跨域资源共享？服务器端怎么配置？

在服务器端配置相应的响应头，以允许来自其他源的跨域请求。

• Access-Control-Allow-Origin

为 http response headers 添加Access-Control-Allow-Origin，表示允许跨域访问。

Access-Control-Allow-Origin: *：表示任意来源都可以访问。

• Access-Control-Allow-Credentials

注意，如果使用了Access-Control-Allow-Credentials: true，Access-Control-Allow-Origin 就必须指定某个域名。

Access-Control-Allow-Credentials: true 表示允许跨域请求携带凭据（例如cookies、HTTP认证信息或客户端SSL证书）。当设置了这个响应头时，浏览器在发起跨域请求时，会附带相应的凭据信息。

然而，与此同时，设置了 Access-Control-Allow-Credentials: true 的响应头时，也必须明确指定允许跨域访问的域名，而不能设置为通配符 *。这是因为在安全机制上的考虑，跨域请求携带凭据的行为可能会暴露用户的敏感信息，所以需要明确指定允许的域名。这样做可以确保只有指定的域名可以携带凭据进行跨域访问，增强了安全性。

tips：客户端想要在跨域时发送 cookie 等信息需要设置withCredentials: true(ajax)或credentials: 'include'(fetch)

• Access-Control-Allow-Methods | Access-Control-Allow-Headers

如果请求为 preflighted request，则还要为 http response headers 添加Access-Control-Allow-Methods和Access-Control-Allow-Headers

当由于请求方法的原因请求为 preflighted request，需要设置：'Access-Control-Allow-Methods': 'OPTIONS, PUT, DELETE, connect, TRACE, PATCH'

当由于 http request headers 原因使得请求变成 preflighted request，如Content-Type: application/json，需要设置：
'Access-Control-Request-Headers': 'Content-Type'

以 nodejs 为例：

const express = require('express');
const app = express();
// 添加CORS中间件
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有源
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 允许的请求方法
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头
  next();
});
// 处理其他路由或请求
app.get('/', (req, res) => {
  res.send('Hello World!');
});
// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

http reponse headers

a response header is an http header that can be used in an http response, and that doesn’t relate to the content of the message.

Response headers like Age, Location or Server are used to give a more detailed context of the response.

以下是常见的 HTTP 响应头列表：

1. Cache-Control: 控制缓存的行为，如缓存的最大有效时间、是否需要重新验证等。
2. Content-Type: 指示响应的内容类型，例如 text/html、application/json 等。
3. Content-Length: 指示响应内容的长度，以字节为单位。
4. Content-Encoding: 指示响应内容的编码方式，例如 gzip、deflate、br等。
5. Content-Disposition: 指示客户端如何处理响应体，例如文件下载时的文件名和处理方式。
6. Expires: 指示响应过期的日期和时间，与 Cache-Control 类似。
7. Last-Modified: 指示资源最后修改的日期和时间。
8. Location: 用于重定向，指示客户端应该跳转到的 URL。
9. Set-Cookie: 用于设置 Cookie，告知客户端存储 Cookie。
10. Access-Control-Allow-Origin: 允许跨域请求的源域。
11. Access-Control-Allow-Methods: 允许跨域请求的方法，例如 GET、POST 等。
12. Access-Control-Allow-Headers: 允许跨域请求的自定义请求头。
13. Access-Control-Allow-Credentials: 指示是否允许跨域请求携带凭据，如 cookies、HTTP 认证信息等。
14. Access-Control-Expose-Headers: 指示哪些响应头可以在跨域请求的响应中暴露给客户端 JavaScript。
15. Strict-Transport-Security: 指示客户端通过 HTTPS 访问该网站的时长和策略。
16. X-Frame-Options: 指示浏览器是否允许页面在 <frame>、<iframe> 或 <object> 中展示。

http entity headers

an entity header is an http header that describing the content of the body of the message. Entity headers are used in both request and response message.

HTTP 实体头用于描述消息正文的属性和特征。

以下是一些常见的 HTTP 实体头：

1. Content-Type: 指定消息正文的媒体类型和字符集，例如 Content-Type: text/html; charset=UTF-8。

2. Content-Length: 指定消息正文的长度（以字节为单位），例如 Content-Length: 1024。

3. Content-Encoding: 指定消息正文的压缩算法，例如 Content-Encoding: gzip 或 Content-Encoding: deflate。

4. Content-Language: 指定消息正文所使用的自然语言，例如 Content-Language: en-US。

5. Content-Disposition: 指定用户代理应如何显示消息正文，通常用于指示浏览器下载文件，例如 Content-Disposition: attachment;filename=example.txt。

6. Content-Range: 指定消息正文在整个实体中的字节范围，通常用于分块传输和断点续传，例如 Content-Range: bytes 0-999/5000。

这些实体头可用于传输消息正文的元数据，以便接收方能够正确解析和处理消息。