如何用 JavaScript 发送 POST 请求(API)

什么是 POST 请求

POST 请求是一种 HTTP 请求方法，它被用于将数据提交到服务器上的指定资源，用于创建新的实体或者更新已有的实体。POST 请求将提交的数据包含在请求体中，与 GET 请求不同，GET 请求将参数编码到 URL 中。

如何发送 POST 请求

在 JavaScript 中，我们可以使用 fetch API 来发送 POST 请求。fetch 是一种现代的网络请求 API，支持链式调用和 Promise 语法。

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

在这个例子中，我们首先指定请求 type 为 POST，然后设置请求头中的 Content-Type 为 application/json，最后将数据转换为 JSON 格式并放入请求体中。当服务器响应时，我们将 response 对象转化为 json 格式，并将返回的数据打印在控制台上。

注意：在开发中，url、data 均需替换成真实的请求地址和请求数据。

如何解决跨域问题

在使用 fetch 发送跨域请求时，需要设置请求头中的 Access-Control-Allow-Origin 为允许请求的域名。这可以通过在服务器端设置响应头中的 Access-Control-Allow-Origin 来实现。

另外，由于浏览器的同源策略限制，使用 fetch 发送跨域请求时还需要设置请求头中的 mode 为 cors。

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': 'https://example.com'
  },
  body: JSON.stringify(data),
  mode: 'cors'
})

总结

通过上述的讲解，我们可以知道如何使用 JavaScript 发送 POST 请求。fetch API 是一种非常方便易用的现代网络请求 API，使用它可以快捷地处理 AJAX 请求和跨域请求。同时，在使用 fetch 发送跨域请求时需要设置请求头中的 Access-Control-Allow-Origin 和 mode 属性。