JS POST请求跨域失败：Access-Control-Allow-Origin请求头设置异常

兄弟，你踩了跨域请求的典型误区——Access-Control-Allow-Origin 是服务器返回的响应头，完全不是前端请求该设置的头！你在前端用xhr.setRequestHeader加这个头，浏览器直接就忽略了，这就是你觉得它没生效的核心原因。

除此之外，你的代码还有个小问题：你传的是JS对象{"command":"PUSH"}，但设置的Content-Type是text/plain，这会导致服务器收到的是字符串[object Object]，根本不是你想要的有效数据。

修正后的前端代码 #

<!DOCTYPE html>
<html>
<body>
  <div> testing js... </div>
  <script>
    function upload() {
      var method = "POST";
      var url = "http://127.0.0.1:9000/push";
      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      
      // 删掉无效的Access-Control-Allow-Origin请求头
      // 发送JSON数据时，设置正确的Content-Type
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      
      var data = {"command":"PUSH"};
      // 把JS对象转成JSON字符串再发送
      xhr.send(JSON.stringify(data));
      
      // 可以加个回调查看请求状态，方便调试
      xhr.onload = function() {
        console.log("请求状态码:", xhr.status);
        console.log("服务器响应:", xhr.responseText);
      }
    }
    upload();
  </script>
</body>
</html>

关键：服务器端必须返回跨域响应头 #

要彻底解决跨域问题，核心是你的后端服务（http://127.0.0.1:9000）在响应请求时，必须返回Access-Control-Allow-Origin头。举个Node.js Express的简单示例：

const express = require('express');
const app = express();
app.use(express.json()); // 解析JSON格式的请求体

// 处理跨域预检OPTIONS请求（浏览器跨域时会先发这个请求）
app.options('/push', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.sendStatus(200);
});

app.post('/push', (req, res) => {
  console.log("收到的请求数据:", req.body);
  // 必须设置响应头允许跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.json({status: "success", message: "已接收PUSH命令"});
});

app.listen(9000, () => {
  console.log("服务器运行在9000端口");
});

最后再划个重点：

• 前端不要尝试设置Access-Control-Allow-Origin请求头，完全无效
• 发送JSON数据时，一定要把对象转成字符串，并设置正确的Content-Type
• 跨域问题的核心在服务器端，必须返回允许跨域的响应头，别忘了处理OPTIONS预检请求

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