如何使用 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中文網其他相關文章！