解决Svelte应用跨域访问PHP文件的CORS问题

当svelte应用尝试从外部主机上的php文件获取数据失败时，即使对文本文件有效，这通常是由于浏览器强制执行的跨域资源共享（cors）策略所致。本教程将深入探讨cors机制，并提供详细的php服务器端配置方案，通过设置`access-control-allow-origin`等http响应头，使svelte应用能够成功地进行跨域数据请求。

理解跨域资源共享 (CORS) 机制

在现代Web开发中，出于安全考虑，浏览器实施了同源策略（Same-Origin Policy）。这意味着一个网页只能向与其自身“同源”的服务器请求资源。“同源”通常指协议、域名和端口都相同。当Svelte应用部署在一个域名（例如 app.example.com）下，而它试图向另一个域名（例如 api.anotherdomain.com）下的PHP文件发送请求时，就触发了跨域请求。

默认情况下，浏览器会阻止这种跨域请求，以防止恶意网站读取或修改用户在其他网站上的数据。为了在保证安全的前提下允许合法的跨域通信，W3C引入了跨域资源共享（CORS）标准。CORS机制的核心在于，服务器可以通过在HTTP响应头中添加特定的字段，明确告知浏览器它允许哪些源、哪些HTTP方法以及哪些请求头进行跨域访问。

当Svelte应用发送一个跨域请求时，如果服务器没有返回正确的CORS头部信息，浏览器就会拦截响应，导致客户端接收不到数据，或者在控制台看到CORS相关的错误信息。

Svelte应用中的跨域请求示例

以下是一个Svelte组件中尝试使用 XMLHttpRequest 向外部PHP文件发送GET请求的典型代码片段：

立即学习“PHP免费学习笔记（深入）”；

<script>
    let content = "";

    function httpGet() {
        var xmlhttp = new XMLHttpRequest();
        // 目标是外部主机上的PHP文件
        xmlhttp.open("GET", "https://www.kayasuleyman.co.uk/form.php?email=example");
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlhttp.send();

        xmlhttp.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                content = this.responseText;
            } else if (this.readyState === 4 && this.status !== 200) {
                // 处理错误情况，例如网络问题或服务器返回非200状态码
                console.error("Request failed with status: " + this.status);
                content = "Error: Could not fetch data.";
            }
        };
    }
</script>

<div id="demo">
    <button on:click={httpGet}>提交</button>
    <p>输出: {content}</p>
</div>

在这个示例中，Svelte应用试图从 https://www.kayasuleyman.co.uk/form.php 获取数据。如果该PHP文件未配置CORS头部，即使PHP文件本身逻辑正确并返回了数据，Svelte应用也无法接收到响应内容，content 变量将保持为空，或者在浏览器控制台报告CORS错误。使用 fetch API 也会遇到同样的问题，因为它同样受CORS策略约束。

解决之道：配置PHP服务器端CORS头部

要解决Svelte应用（或其他任何前端应用）的跨域请求问题，关键在于修改目标PHP文件，使其在响应中包含必要的CORS头部信息。这些头部会告诉浏览器，该服务器允许来自不同源的请求。

将以下代码添加到你的PHP文件的最顶部，确保在任何输出内容之前执行：

Fireflies.ai

自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

145

查看详情

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");

// 后续是你的PHP业务逻辑，例如处理请求参数并返回数据
// 例如：
if (isset($_GET['email'])) {
    echo htmlspecialchars($_GET['email']);
} else {
    echo "No email provided.";
}
?>

让我们详细解释这些头部的作用：

1. header('Access-Control-Allow-Origin: *');

   • 这是最重要的一个头部。它指示浏览器，允许任何来源（*）的网页向当前服务器发送跨域请求。
   • 注意： 在生产环境中，强烈建议将 * 替换为你的Svelte应用所在的具体域名（例如 https://your-svelte-app.com），以提高安全性，避免不必要的开放。如果你有多个允许的源，可以通过逗号分隔它们，或者在服务器端根据请求的 Origin 头部动态设置。

2. header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

   • 此头部指定了服务器允许的HTTP请求方法。在这个例子中，它允许 GET、POST、PUT、DELETE 和 OPTIONS 方法。
   • OPTIONS 方法通常用于“预检请求”（Preflight Request），浏览器会在发送实际请求之前，先发送一个 OPTIONS 请求来询问服务器是否允许特定的跨域请求。

3. header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");

   • 此头部指定了服务器允许在跨域请求中使用的自定义请求头。例如，Content-Type 用于指示请求体的媒体类型，Authorization 用于身份验证令牌，X-Requested-With 是许多JavaScript库（如jQuery）在AJAX请求中添加的自定义头。
   • 如果你的前端请求中包含了任何非标准或非简单的HTTP头部，你都需要在这里明确列出它们。

通过添加这些头部，当Svelte应用再次发送请求时，PHP服务器的响应中将包含这些CORS信息。浏览器在收到响应后，会检查这些头部，如果匹配其CORS策略，就会允许Svelte应用访问响应数据，从而解决跨域问题。

注意事项

• 安全性考量： 如前所述，Access-Control-Allow-Origin: * 允许所有来源访问。在开发阶段这很方便，但在生产环境中，出于安全考虑，应将 * 替换为你的前端应用的精确域名，例如：

  header('Access-Control-Allow-Origin: https://your-svelte-app.com');

  登录后复制

  如果你有多个允许的源，可以检查 Origin 请求头并动态设置：

  $allowedOrigins = ['https://your-svelte-app.com', 'https://another-allowed-domain.com'];
  if (isset($_SERVER['HTTP_ORIGIN']) && in_array($_SERVER['HTTP_ORIGIN'], $allowedOrigins)) {
      header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
  }

  登录后复制
• 预检请求（Preflight Requests）： 对于非简单请求（例如，使用 PUT、DELETE 方法，或包含自定义头部），浏览器会在发送实际请求之前，先发送一个 OPTIONS 预检请求。服务器必须正确响应这个 OPTIONS 请求，包含适当的CORS头部，否则实际请求将不会被发送。上述的 Access-Control-Allow-Methods 头部中包含 OPTIONS 是处理预检请求的关键。
• 凭证（Credentials）： 如果你的Svelte应用需要发送带有Cookie、HTTP认证或客户端SSL证书的跨域请求，前端需要设置 withCredentials = true（对于 XMLHttpRequest）或 credentials: 'include'（对于 fetch），并且服务器端需要添加 header('Access-Control-Allow-Credentials: true');。当 Access-Control-Allow-Credentials 为 true 时，Access-Control-Allow-Origin 就不能设置为 *，必须指定具体的源。
• 缓存（Max-Age）： 你还可以添加 header('Access-Control-Max-Age: 86400'); 来指定预检请求的结果可以被缓存多久（单位为秒），这可以减少后续相同请求的预检次数，提高性能。

总结

Svelte应用在进行跨域数据请求时遇到的问题，绝大多数情况下都源于服务器端缺乏正确的CORS配置。通过在PHP文件的最顶部添加 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 等HTTP响应头，可以明确告知浏览器该服务器允许跨域访问。理解CORS机制及其安全含义，并根据实际需求（特别是生产环境）进行精确的配置，是确保前端应用与后端API顺畅通信的关键。

以上就是解决Svelte应用跨域访问PHP文件的CORS问题的详细内容，更多请关注php中文网其它相关文章！