简介
在前端开发中，我们经常需要处理跨域请求的问题。为了保证网站安全，浏览器会对不同源的请求进行限制。其中一个限制是浏览器不允许从一个源加载的资源与来自另一个源的资源进行交互。这就是所谓的“同源策略”。
然而，在某些情况下，我们确实需要进行跨域请求，比如在使用 API 调用时。这时候我们可以通过启用 CORS（跨域资源共享）来解决这个问题。
在本文中，我们将重点介绍访问控制如何允许源报头工作，以及如何正确地配置它来启用 CORS。
什么是源报头？
HTTP 报头是 HTTP 请求和响应消息的组成部分之一，它提供了关于资源的元数据信息。源报头则是指标识请求来源的报头字段。在 HTTP/1.1 中，这个字段名为 “Origin”。
当我们向一个跨域资源发出请求时，浏览器会自动添加 Origin 报头字段，并将当前页面的源作为值传递进去。
如何启用 CORS？
要启用 CORS，我们需要在服务器端发送一组特殊的 HTTP 头。这些头包括：
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
- Access-Control-Allow-Credentials
Access-Control-Allow-Origin
这个头指定了允许请求的源。它的值可以是一个具体的域名，也可以是一个通配符（“*”），表示允许任何来源。
例如，如果我们想允许来自 example.com 的请求，我们可以在响应头中添加以下内容：
Access-Control-Allow-Origin: https://example.com
如果我们想允许任何来源，则可以使用通配符：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods
这个头指定了服务器支持的 HTTP 方法。它的值可以是一个逗号分隔的方法列表，例如：
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers
这个头指定了服务器允许浏览器发送的自定义头。它的值可以是一个逗号分隔的头列表，例如：
Access-Control-Allow-Headers: X-Custom-Header, Authorization
Access-Control-Allow-Credentials
这个头指定是否允许发送认证信息（如 cookies）。它的值为 true 或 false。
示例代码
下面是一个使用 Express 框架启用 CORS 的简单示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- -------- ------------- ---- ----- -- - -------------------------------------------- ----- --------------------------------------------- ----- ----- ------ --------------------------------------------- ----------------- ---------------- ------------------------------------------------- ------ ------- --- -- -- --- -- -------------------- ----- ---- -- - -- ---- --- ---------------- -- -- ------------------- ------- -- ---- --------
结论
访问控制允许源报头是启用 CORS 的重要组成部分。通过配置正确的响应头，我们可以允许跨域请求，并确保网站的安全性。
学习建议
- 查阅 MDN 文档了解更多关于 CORS 的知识。
- 尝试使用 Fetch API 调用远程 API 以及处理跨域请求。
- 在 Node.js 中使用 CORS 中间件处理跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7989