如何在 JavaScript 中進行跨域 POST 請求，無需刷新頁面，無需解析回應？

使用 JavaScript 發送跨域 POST 請求

問題：

如何使用 JavaScript 執行跨域 POST 請求無需刷新頁面或要求響應

解決方案：

了解跨源資源共享（CORS）

為了方便跨域通信， CORS 是在伺服器上實現的標準。透過在伺服器上設定回應標頭，您可以授予特定網域存取您自己網域上資源的權限。

伺服器端設定（使用PHP）：

1. 在目標PHP 檔案（例如postHere.php）中，包含下列內容code:

<?php
switch ($_SERVER['HTTP_ORIGIN']) {
    case 'http://from.com': case 'https://from.com':
    header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
    break;
}
?>

這允許來自from.com 的腳本發出跨域POST、GET 和OPTIONS請求。

客戶端 AJAX 請求 (使用 jQuery）：

1. 設定您的AJAX請求：

$.ajax({
  type: 'POST',
  url: 'https://to.com/postHere.php',
  crossDomain: true,
  data: '{"some":"json"}',
  dataType: 'json',
  success: function(responseData, textStatus, jqXHR) {
    var value = responseData.someKey;
  },
  error: function (responseData, textStatus, errorThrown) {
    alert('POST failed.');
  }
});

處理：

1. 瀏覽器發送 OPTIONS 請求以檢查是否允許 POSTing。
2. 伺服器使用授予特定網域權限的存取控制標頭回應。
3. 瀏覽器發送實際的 POST 請求。
4. 伺服器處理請求並回傳回應。

注意事項：

• 確保適當的安全性授予跨域存取權限時已採取預防措施。
• 行動瀏覽器通常不支援跨域 POST。
• 考慮雙重請求的潛在開銷和安全隱患。
• 始終在回應中傳回適當的 CORS 標頭，而不僅僅是 OPTIONS 請求。

以上是如何在 JavaScript 中進行跨域 POST 請求，無需刷新頁面，無需解析回應？的詳細內容。更多資訊請關注PHP中文網其他相關文章！