为网站设置 CORS（跨域资源共享）

什么是 CORS？

跨域资源共享（CORS）是一种基于 HTTP 头的机制，用于放宽浏览器对跨域请求的限制。简单来说，当一个网页（例如，位于 example.com 的网页）想要从不同的域（例如，api.example.net）请求资源时，浏览器会默认阻止这种请求，这就是浏览器的同源策略。CORS 允许服务器在响应中添加特定的头部，告诉浏览器允许哪些来源的请求访问资源，从而安全地实现跨域访问。

为什么要使用 CORS？

当您的前端应用（例如，一个在 app.example.com 上运行的 SPA）需要从后端 API（例如，在 api.example.com 上运行）获取数据时，您很可能需要使用 CORS。

CORS 参数详解

以下是 CORS 中常用的一些参数及其作用：

1. Access-Control-Allow-Origin:

   • 作用： 指定允许访问资源的来源。
   • 取值：
     • *：允许来自任何域的请求（不推荐用于生产环境，因为不安全）。
     • https://example.com：只允许来自 https://example.com 的请求。
     • https://example.com https://www.example.net: 只允许来自 https://example.com 和 https://www.example.net的请求。
   • 重要提示： 当请求带有 Authorization 首部的时候，Access-Control-Allow-Origin 不能设置为 *，必须设置为具体的域，否则跨域请求将会失败。

2. Access-Control-Allow-Methods:

   • 作用： 指定允许的 HTTP 方法（如 GET、POST、PUT、DELETE）。
   • 取值： 例如：GET, POST, PUT, DELETE, OPTIONS
   • 重要提示： 如果你的请求包含了自定义的请求头，或者使用了 PUT 或者 DELETE 方法，你必须在这里声明 OPTIONS 方法，否则，浏览器会首先发送一个 OPTIONS 预检请求， 如果预检请求的响应中没有声明允许的 OPTIONS 方法，你的请求会失败。

3. Access-Control-Allow-Headers:

   • 作用： 指定允许客户端在请求中使用的自定义 HTTP 头。
   • 取值： 例如： Content-Type, Authorization
   • 重要提示： 如果你的请求中包含了自定义的请求头，你必须在这里声明允许使用，否则浏览器会阻止你的请求。

4. Access-Control-Allow-Credentials:

   • 作用： 是否允许跨域请求携带 Cookie 或 HTTP 认证信息。
   • 取值： true 或 false。
   • 重要提示： 当设置为 true 时，Access-Control-Allow-Origin 的值不能是通配符 *。

在 ServBay 中启用并配置 CORS

ServBay 提供了便捷的界面来配置网站的 CORS 设置，具体步骤如下：

1. 选择网站: 在ServBay主界面左侧的导航栏中，点击 “网站” 选项。 从网站列表中选择您要配置 CORS 的网站。
2. 进入CORS配置: 在网站配置界面中，找到 “CORS” 部分。ServBay默认会关闭CORS，您需要手动开启CORS，将滑块开关由“关闭”切换至“开启”状态。
3. 配置 Access-Control-Allow-Origin: 在 Access-Control-Allow-Origin 输入框中，输入允许访问的域名，多个域名可以使用空格分隔。例如： https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com。
4. 配置 Access-Control-Allow-Methods: 在 Access-Control-Allow-Methods 输入框中，输入您希望允许的 HTTP 请求方法。例如：GET, POST, PUT, DELETE, OPTIONS。
5. 配置 Access-Control-Allow-Headers: 在 Access-Control-Allow-Headers 输入框中，输入您希望允许的请求头。例如：Content-Type, Authorization。
6. 启用 Allow-Credentials (可选): 如果您需要允许跨域请求携带 Cookie 或认证信息，请启用 Allow-Credentials 滑块开关。请务必注意，如果启用了此选项，Access-Control-Allow-Origin 的值不能设置为通配符 *。
7. 保存设置: 完成配置后，点击右下角的 "保存" 按钮来应用您的更改。

示例

根据上面的截图，在 “ServBay Testing” 网站中配置的 CORS 如下：

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: 启用。

这意味着来自以上域名的请求可以访问 servbay.new 网站的资源，并且可以使用 GET, POST, PUT, DELETE, OPTIONS 方法发送请求，同时可以携带 Content-Type 和 Authorization 请求头和 Cookie 信息。

注意事项

• 安全性: 在生产环境中，请避免使用通配符 * 作为 Access-Control-Allow-Origin 的值。
• 缓存: 浏览器可能会缓存 CORS 响应，因此在更改 CORS 设置后，您可能需要清除浏览器缓存。
• 代码配置: 有些情况下，除了在 Web 服务器配置 CORS 之外，还需要在代码中（Laravel）配置 CORS。
• 复杂场景: 对于更复杂的跨域场景，您可能需要结合 CORS 和其他技术，例如 JSONP 或代理服务器。

通过以上步骤，您可以在 ServBay 中轻松地为您的网站启用和配置 CORS，确保您的跨域请求能够顺利进行。

希望这份文档能帮助您更好地理解和使用 ServBay 的 CORS 功能。如有任何疑问，请随时提出。