客户端使用XMLHttpRequest发送POST请求失败求助

我来帮你排查下这个问题！你想通过客户端发送POST请求调用在线服务运行Python代码，但XMLHttpRequest请求失败，大概率是这几个常见原因，咱们一步步来解决：

1. 跨域（CORS）限制是头号嫌疑 #

浏览器的同源策略会阻止你从当前域名（比如本地file://协议页面，或者自己的网站域名）向另一个域名的在线服务发请求，除非目标服务配置了允许跨域的响应头。这是前端请求跨域名接口时最容易碰到的问题。

解决办法：

• 如果你能修改目标服务的配置，给响应添加Access-Control-Allow-Origin头，值设为*（允许所有域名）或者你的页面具体域名。
• 如果没法改服务端，就用代理服务器绕开：自己搭个简单的后端（比如用Python Flask或者Node.js写几行代码），让后端去调用那个在线服务，你的前端再请求自己的后端——这样就不会触发浏览器的跨域限制了。

2. FormData参数可能不完整或格式不符 #

看你代码里的参数，有些字段是空值（比如Privacy、Title），说不定目标服务要求这些字段必须有特定取值，或者你写的参数名和服务端实际接收的不一致。

建议你这么做：

• 打开浏览器开发者工具（按F12），切换到「Network」标签，然后手动在目标在线服务的网页上运行一次Python代码，找到它发送的POST请求，查看实际提交的FormData参数列表和每个参数的取值，完全照搬这些参数到你的代码里。
• 仔细核对参数名，别打错字——比如LanguageChoiceWrapper是不是服务端真正接受的字段名？差一个字母都可能导致请求失败。

3. 补全XHR的完整配置 #

你只贴了FormData的部分代码，没看到XHR的具体设置，给你一个完整的可参考示例，你可以对照着调整：

var code = "print('hey')";
var input = "";
var data = new FormData();

// 按照服务端实际要求的参数添加，这里先沿用你给出的字段
data.append('LanguageChoiceWrapper', '24');
data.append('EditorChoiceWrapper', '1');
data.append('LayoutChoiceWrapper', '1');
data.append('Program', code);
data.append('Input', input);
data.append('Privacy', ''); // 如果服务端允许空就留着，不然填它要求的值
data.append('PrivacyUsers', '');
data.append('Title', '');
// 记得把你没写完的SavedO...相关参数补全

var xhr = new XMLHttpRequest();
xhr.open('POST', '这里替换成目标在线服务的接口URL', true);

// 重要提醒：用FormData时，不要手动设置Content-Type！浏览器会自动生成正确的multipart/form-data头
// 下面这行要删掉，不然会导致请求格式错误
// xhr.setRequestHeader('Content-Type', 'multipart/form-data');

// 如果服务端要求特定请求头（比如User-Agent），可以在这里添加
xhr.setRequestHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36');

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功，处理返回的运行结果
    console.log('Python代码运行结果:', xhr.responseText);
  } else {
    // 请求失败，打印错误信息排查
    console.error('请求失败，状态码:', xhr.status);
    console.error('服务端返回错误:', xhr.responseText);
  }
};

xhr.onerror = function() {
  console.error('网络错误，无法连接到在线服务');
};

xhr.send(data);

4. 检查服务端的额外验证要求 #

有些在线服务会做反爬验证，比如检查请求的Referer头或者是否携带特定Cookie。你可以在开发者工具里查看手动请求时的所有请求头，然后在XHR里一一对应添加。

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