ServBay

简体中文

English
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

简体中文

English
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

为 ServBay 中的网站设置 CORS（跨域资源共享） ​

在现代 Web 开发中，前端应用（通常运行在一个域名下）经常需要访问后端 API 或其他服务（可能运行在不同的域名或端口）。浏览器的同源策略默认会阻止这种跨域请求，出于安全考虑。跨域资源共享（CORS）是一种标准的机制，允许服务器声明哪些源可以访问其资源，从而安全地实现跨域交互。

本文将指导您如何在 ServBay 本地 Web 开发环境中，通过 ServBay 的用户界面为您的网站轻松配置和启用 CORS。

什么是 CORS？ ​

跨域资源共享 (CORS) 是一种基于 HTTP 头的机制，它允许服务器指示除了它自己的源以外的哪些源（域、协议或端口）被允许加载资源。当一个网页尝试从一个与自身不同的源请求资源时，浏览器会执行一个“跨域 HTTP 请求”。根据浏览器的同源策略，这类请求默认会被阻止。CORS 提供了服务器与浏览器之间沟通的方式，以确定跨域请求是否安全可行。

为什么开发者需要配置 CORS？

当您构建一个前后端分离的应用时（例如，前端在 app.servbay.demo，后端 API 在 api.servbay.demo），或者您的前端需要调用第三方 API 时，浏览器会因为同源策略而阻止这些跨域请求。配置 CORS 就是为了告诉浏览器，服务器允许来自您前端源的请求访问其资源，从而解决因同源策略导致的请求失败问题。

理解 CORS 的关键 HTTP 响应头 ​

当服务器响应一个跨域请求时，会包含一些特定的 Access-Control-* HTTP 响应头。客户端浏览器接收到这些头部后，会根据其值来决定是否允许该跨域请求成功。以下是 ServBay 中可配置的一些核心 CORS 参数（对应的就是这些 HTTP 响应头）：

  1. Access-Control-Allow-Origin

    • 作用： 这是最关键的 CORS 头部，指定了允许访问资源的具体来源（一个或多个域名）。
    • 取值：
      • *：表示允许来自任何域的请求。重要提示： 尽管方便，但在生产环境中通常不推荐使用 *，因为它允许任何网站访问您的资源，存在潜在安全风险。
      • https://servbay.demo：只允许来自 https://servbay.demo 这个特定源的请求。
      • https://servbay.demo https://api.servbay.demo：允许来自多个特定源的请求，多个源之间用空格分隔。
    • 注意： 如果跨域请求需要携带 Cookie 或 HTTP 认证信息（即设置了 Access-Control-Allow-Credentials: true），则 Access-Control-Allow-Origin 绝对不能设置为 *，必须指定具体的源。

  2. Access-Control-Allow-Methods

    • 作用： 指定了允许跨域请求使用的 HTTP 方法（如 GET, POST, PUT, DELETE, OPTIONS 等）。
    • 取值： 例如：GET, POST, PUT, DELETE, OPTIONS。多个方法用逗号分隔。
    • 注意： 对于一些“非简单请求”（如使用了 PUT 或 DELETE 方法，或带有自定义请求头），浏览器会先发送一个 OPTIONS 方法的“预检请求”（Preflight Request）。服务器必须响应这个预检请求，并在响应中包含 Access-Control-Allow-Methods 等头部，告诉浏览器实际请求允许使用哪些方法。因此，在配置中包含 OPTIONS 方法通常是必要的。

  3. Access-Control-Allow-Headers

    • 作用： 指定了允许跨域请求携带的自定义 HTTP 请求头。
    • 取值： 例如：Content-Type, Authorization, X-Requested-With。多个头部用逗号分隔。
    • 注意： 如果您的前端请求在默认的简单请求头部（如 Accept, Accept-Language, Content-Language, Content-Type 且其值是 application/x-www-form-urlencoded, multipart/form-data, 或 text/plain）之外使用了任何其他头部，浏览器会先发送预检请求，并且您必须在此处明确列出允许的自定义头部。

  4. Access-Control-Allow-Credentials

    • 作用： 指示是否允许跨域请求携带用户的凭据信息，如 Cookie、客户端 SSL 证书 或 HTTP 认证。
    • 取值： true 或 false。
    • 注意： 当设置为 true 时，如前所述，Access-Control-Allow-Origin 的值不能是通配符 *。同时，客户端（浏览器中的 JavaScript 代码）也需要在发起请求时设置相应的标志（如 xhr.withCredentials = true 或 fetch(url, { credentials: 'include' })）。

在 ServBay 中启用并配置 CORS ​

ServBay 提供了一个直观的图形界面，让您可以轻松地为每个网站独立配置 CORS 设置。以下是详细步骤：

  1. 打开 ServBay 并进入网站列表: 启动 ServBay 应用程序。在主界面的左侧导航栏中，点击 “网站” 选项。您将看到 ServBay 中配置的所有本地网站列表。

  2. 选择需要配置 CORS 的网站: 在网站列表中，找到您想要启用和配置 CORS 的特定网站。点击该网站的名称，进入其详细配置界面。

  3. 找到并启用 CORS 设置: 在网站配置页面的中间区域，向下滚动找到 “CORS” 部分。ServBay 默认情况下 CORS 是关闭的。点击该部分旁边的滑块开关，将其从“关闭”切换到“开启”状态。启用后，下方的配置选项将变为可编辑状态。

  4. 配置 Access-Control-Allow-Origin: 在 “Access-Control-Allow-Origin” 输入框中，输入您希望允许访问此网站资源的一个或多个源。如果您需要允许多个源，请使用空格将它们隔开。例如：https://frontend.servbay.demo https://anotherapp.servbay.demo。请避免在生产环境中使用 *。

  5. 配置 Access-Control-Allow-Methods: 在 “Access-Control-Allow-Methods” 输入框中，输入您希望允许的 HTTP 请求方法列表。多个方法使用逗号分隔。例如：GET, POST, PUT, DELETE, OPTIONS。确保包含了您的应用需要用到的所有方法，并且通常包含 OPTIONS 以支持预检请求。

  6. 配置 Access-Control-Allow-Headers: 在 “Access-Control-Allow-Headers” 输入框中，输入您希望允许跨域请求携带的自定义 HTTP 请求头列表。多个头部使用逗号分隔。例如：Content-Type, Authorization, X-Custom-Header。只列出您的应用实际需要发送的自定义头部。

  7. 配置 Access-Control-Allow-Credentials (可选): 如果您需要允许跨域请求携带 Cookie 或 HTTP 认证信息，请点击 “Allow-Credentials” 旁边的滑块开关，将其切换到“开启”状态。再次强调： 启用此选项时，步骤 4 中的 Access-Control-Allow-Origin 绝对不能设置为 *。

  8. 保存您的配置: 完成所有 CORS 设置后，请务必点击页面右下角的 "保存" 按钮来应用您的更改。ServBay 会自动更新相关的 Web 服务器配置（如 Caddy 或 Nginx），无需手动重启服务。

配置示例 ​

以下图片展示了在 ServBay 中为名为 “ServBay Demo Website” 的网站配置 CORS 的一个示例：

ServBay CORS 配置示例截图

根据上图中的配置：

  • Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
  • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
  • Access-Control-Allow-Headers: Content-Type, Authorization
  • Allow-Credentials: 启用 (true)

这意味着只有来自 https://frontend.servbay.demo 和 https://api.servbay.demo 这两个源的请求被允许访问 “ServBay Demo Website” 的资源。这些请求可以使用 GET, POST, PUT, DELETE, OPTIONS 方法，可以携带 Content-Type 和 Authorization 头部，并且允许携带 Cookie 等凭据信息。

注意事项与最佳实践 ​

  • 安全性优先： 在开发和测试环境中使用 Access-Control-Allow-Origin: * 可能很方便，但在部署到生产环境时，务必将其限制为您的应用实际需要交互的特定源，以提高安全性。
  • 预检请求： 理解预检请求（OPTIONS 方法）的工作方式对于调试 CORS 问题至关重要。确保您的服务器（通过 ServBay 配置）正确响应预检请求所需的头部。
  • 浏览器缓存： 浏览器可能会缓存 CORS 策略。如果在修改 ServBay 中的 CORS 配置后仍然遇到问题，尝试清除浏览器缓存或使用浏览器的隐身模式进行测试。
  • 应用层 CORS： 某些 Web 框架或库（如 Laravel, Express.js, Spring Boot 等）也提供了在应用代码层面配置 CORS 的功能。ServBay 的 CORS 配置是在 Web 服务器层面（Caddy/Nginx）生效，通常优先于应用层配置。在某些复杂场景下，您可能需要检查或协调 Web 服务器和应用代码两层的 CORS 设置。
  • 调试工具： 使用浏览器开发者工具（通常按 F12 打开）的网络（Network）标签页来检查跨域请求和响应的 HTTP 头部。这将帮助您诊断 CORS 配置是否正确生效以及请求失败的具体原因。

常见问题解答 (FAQ) ​

Q: 我已经按照步骤配置了 CORS，为什么跨域请求还是失败？

A: 请按以下步骤排查问题：

  1. 检查浏览器控制台和网络标签页： 浏览器通常会在控制台输出 CORS 相关的错误信息，并在网络标签页显示请求和响应的所有头部。检查响应中是否包含了正确的 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 头部，以及它们的取值是否与您的客户端请求匹配。
  2. 核对源地址： 确保 Access-Control-Allow-Origin 中的源地址（协议、域名、端口）与您的前端应用发起请求的源地址完全一致。
  3. 检查方法和头部： 确保 Access-Control-Allow-Methods 包含了您使用的 HTTP 方法，并且 Access-Control-Allow-Headers 包含了您请求中使用的所有自定义头部。
  4. 凭据问题： 如果您需要携带 Cookie 或其他凭据，确保 ServBay 中已启用 Allow-Credentials，并且 Access-Control-Allow-Origin 不是 *。同时，确认您的客户端代码也设置了发送凭据的选项（如 withCredentials = true）。
  5. 预检请求： 对于非简单请求，检查浏览器是否发送了 OPTIONS 预检请求，以及服务器对该请求的响应是否包含了正确的 CORS 头部。
  6. ServBay 保存： 确保您在 ServBay 中修改配置后点击了“保存”按钮。

Q: 我能否为所有网站设置一个全局的 CORS 策略？

A: ServBay 的 CORS 配置是针对每个网站独立进行的，这样可以提供更大的灵活性和安全性。目前 ServBay UI 不提供全局 CORS 设置。如果您需要为多个网站应用相似的策略，需要为每个网站分别配置。

Q: ServBay 是如何实现 CORS 配置的？

A: ServBay 在底层使用了 Caddy 或 Nginx 作为 Web 服务器。您在 ServBay UI 中进行的 CORS 配置会被 ServBay 转换为相应的 Caddyfile 或 Nginx 配置文件指令。ServBay 负责管理这些配置文件并确保服务器重新加载配置，无需您手动编辑。

总结 ​

通过 ServBay 直观的用户界面，您可以轻松为本地开发环境中的网站启用和配置 CORS，有效解决跨域访问问题。正确理解和配置 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 和 Access-Control-Allow-Credentials 等关键头部，是确保您的跨域请求安全顺畅的关键。遵循本文的指南和注意事项，将帮助您更高效地进行本地 Web 开发。