如何使用 CORS 在 JavaScript 中发出跨域 POST 请求？

通过 JavaScript 发送跨域 POST 请求

跨域请求是 Web 开发中的常见挑战。在 JavaScript 中，有多种方法可以发送跨域 POST 请求，但最直接的方法之一是利用“跨域资源共享”(CORS) 标准。

CORS 配置服务器

在将接收 POST 请求的服务器上启用 CORS通过：

1. 添加以下响应标头：

   • Access-Control-Allow-Origin: from.com（将 from.com 替换为请求）
   • 访问控制允许方法： POST
   • 访问控制最大年龄：1000
   • 访问控制允许标头：内容类型、授权、X-Requested-With

跨域 POST 通过JavaScript

在 JavaScript 中，您可以使用 fetch API 发送跨域 POST 请求：

fetch('https://to.com/postHere.php', {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ some: 'json' })
})
  .then(response => response.json())
  .then(responseData => {
    console.log(responseData.someKey);
  })
  .catch(error => {
    console.error('POST failed', error);
  });

此代码向 https://to 发出 POST 请求。 com/postHere.php 来自不同的来源 (from.com)。它为 CORS 设置必要的标头，并将请求正文字符串化为 JSON。

处理 OPTIONS 请求

当客户端发送跨域 POST 请求时，浏览器首先向服务器发送OPTIONS请求，检查服务器是否支持该请求。服务器应使用适当的 CORS 标头响应此请求，以指示允许 POST 请求。

注意事项

• 此方法需要 CORS 支持server.
• 该请求将向服务器发出两个请求：一个 OPTIONS 请求，后跟一个 POST请求。
• CORS 可能不适用于所有设备，尤其是移动设备。

以上是如何使用 CORS 在 JavaScript 中发出跨域 POST 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！