当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免费学习笔记（深入）”；
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."; } }; } 输出: {content}
在这个示例中，Svelte应用试图从 https://www.kayasuleyman.co.uk/form.php 获取数据。如果该PHP文件未配置CORS头部，即使PHP文件本身逻辑正确并返回了数据，Svelte应用也无法接收到响应内容，content 变量将保持为空，或者在浏览器控制台报告CORS错误。使用 fetch API 也会遇到同样的问题，因为它同样受CORS策略约束。
解决之道：配置PHP服务器端CORS头部
要解决Svelte应用（或其他任何前端应用）的跨域请求问题，关键在于修改目标PHP文件，使其在响应中包含必要的CORS头部信息。这些头部会告诉浏览器，该服务器允许来自不同源的请求。
将以下代码添加到你的PHP文件的最顶部，确保在任何输出内容之前执行：
让我们详细解释这些头部的作用：
header(‘Access-Control-Allow-Origin: *’);
这是最重要的一个头部。它指示浏览器，允许任何来源（*）的网页向当前服务器发送跨域请求。注意： 在生产环境中，强烈建议将 * 替换为你的Svelte应用所在的具体域名（例如 https://your-svelte-app.com），以提高安全性，避免不必要的开放。如果你有多个允许的源，可以通过逗号分隔它们，或者在服务器端根据请求的 Origin 头部动态设置。
header(‘Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS’);
此头部指定了服务器允许的HTTP请求方法。在这个例子中，它允许 GET、POST、PUT、DELETE 和 OPTIONS 方法。OPTIONS 方法通常用于“预检请求”（Preflight Request），浏览器会在发送实际请求之前，先发送一个 OPTIONS 请求来询问服务器是否允许特定的跨域请求。
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中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1325330.html
微信扫一扫 
支付宝扫一扫 
