为何允许全源请求的服务器无法接收fetch/axios的POST请求？

针对你遇到的POST请求失败、GET请求正常，且在线工具能成功发起POST但前端fetch/axios不行的问题，给你几个实用的排查方向和解决办法：

1. 检查OPTIONS预检请求状态 #

浏览器发送带Content-Type: application/json的POST请求时，会先触发OPTIONS预检请求，验证后端是否允许该跨域操作。打开浏览器开发者工具的Network面板，查看OPTIONS请求的响应：

• 如果响应状态是4xx/5xx，说明后端CORS配置存在遗漏：
  • 需确保响应头包含Access-Control-Allow-Methods: POST, GET, OPTIONS
  • 需确保响应头包含Access-Control-Allow-Headers: Content-Type
  • OPTIONS请求需返回200状态码

2. 适配000webhost的安全限制 #

免费主机000webhost默认有防护规则，可能拦截前端发起的POST请求（在线工具通常能绕过这类检测），可以尝试两种调整：

改用表单格式发送数据 #

将请求的Content-Type改为application/x-www-form-urlencoded，并把body转为表单格式：

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: new URLSearchParams(data)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

添加模拟浏览器请求头 #

给请求加上User-Agent头，模拟真实浏览器的请求特征：

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    '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'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

3. 绕过浏览器缓存影响 #

浏览器可能缓存预检请求的结果，导致后续请求失败。可以在请求URL后添加随机参数强制绕过缓存：

const urlWithCacheBust = `${url}?t=${Date.now()}`;
fetch(urlWithCacheBust, { /* 其他配置保持不变 */ })

4. 核对后端数据接收逻辑 #

如果后端期望接收表单数据而非JSON，你发送的JSON格式body会导致后端解析失败。比如PHP后端需要用file_get_contents('php://input')读取JSON请求体，而非直接使用$_POST数组。

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