Svelte中XMLHttpRequest与Fetch请求外部PHP文件无响应问题求助

问题原因 #

• 最大概率是CORS（跨域资源共享）策略限制：浏览器会对跨域请求做校验，如果目标PHP服务端没有返回符合要求的CORS响应头，浏览器会直接拦截返回内容，你可以在浏览器控制台看到对应的CORS报错。而静态文本文件的托管服务通常默认配置了允许跨域的响应头，所以请求可以正常拿到结果。
• 次要问题：GET请求不需要设置Content-Type: application/x-www-form-urlencoded请求头，该请求头是POST提交表单场景使用的，部分严格的服务端可能会因为这个不匹配的请求头拒绝返回内容。
• 其他可排查点：目标PHP文件本身运行报错、服务端设置了防盗链/IP限制等访问规则。

解决步骤 #

1. 优先配置服务端CORS规则：在你目标主机的form.php文件最顶部添加以下代码：

<?php
// 开发阶段可以允许所有来源跨域，生产环境建议替换为你Svelte应用的实际域名
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// 处理浏览器预检请求
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    exit(0);
}
// 原有业务逻辑
echo $_GET['email'];
?>

2. 优化前端请求代码，删除多余的请求头配置，新增日志方便排查：

<script>
let content = "";

function httpGet()
{
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", "https://www.kayasuleyman.co.uk/form.php?email=example");
      xmlhttp.send();
      xmlhttp.onreadystatechange = function() {
        // 打印状态方便排查问题
        console.log('请求状态', this.readyState, this.status, this.responseText)
        if (this.readyState === 4 && this.status === 200) {
          content = this.responseText;
        };
      }
}
</script>

<div id="demo">
  <button on:click={httpGet}>Submit</button>
  <p>Output: {content}</p>
</div>

3. 兜底排查：如果修改后仍无法正常返回，打开浏览器控制台「网络」标签，查看该请求的状态码、响应头和返回内容，确认是否是PHP本身运行错误或者服务端有其他访问限制。

内容的提问来源于stack exchange，提问作者Kylo