JavaScript 如何发送跨域 POST 请求？

要在 JavaScript 中发送跨域 POST 请求，通常有几种方法可以处理，其中包括使用 XMLHttpRequest 对象、fetch API 或者通过设置 CORS 头来解决浏览器的同源策略限制。下面我将具体介绍每种方法的使用：

1. 使用 XMLHttpRequest 发送跨域 POST 请求

尽管 XMLHttpRequest 是较老的技术，但它仍然可以用来发送跨域请求。为了使跨域请求工作，服务器必须在响应中包含一些 CORS（Cross-Origin Resource Sharing）头。

javascript
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true); // 第三个参数 true 表示异步
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(JSON.stringify({key: "value"}));

2. 使用 fetch API 发送跨域 POST 请求

fetch API 是现代浏览器中的新标准，用于进行网络请求。它同样支持跨域请求，并且语法更加现代和简洁。

javascript
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({key: 'value'})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

3. 设置 CORS 头

在实际的服务器端配置中，为了使跨域请求成功，通常需要在服务器端设置相应的 CORS 头。例如，在 Node.js 中可以使用 Express 框架和 cors 中间件来简化这一过程：

javascript
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://your-webpage.com' // 只允许来自特定来源的跨域请求
}));

app.post('/data', (req, res) => {
  // ...
  res.json({ success: true });
});

示例

假设我们有一个任务是从前端 JavaScript 应用向 https://api.example.com/data 发送 POST 请求，并且这个 API 支持跨域请求。我们可以使用 fetch API 这样做：

javascript
async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST', 
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
  return response.json(); // 解析并返回 JSON 数据
}

postData('https://api.example.com/data', { key: 'value' })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在本例中，postData 函数通过 fetch 发送 POST 请求，并等待解析成 JSON 的响应。如果服务器正确配置了 CORS 头以允许来自当前源的请求，那么此请求将成功完成。