溫馨提示×

JavaScript中如何進行跨域請求

小樊
81
2024-10-27 07:30:59
欄目: 編程語言

在 JavaScript 中，進行跨域請求通常需要使用 CORS（跨源資源共享）機制。CORS 需要服務(wù)器端的支持，服務(wù)器需要在響應(yīng)頭中添加允許跨域的頭信息。以下是幾種常見的 CORS 跨域請求方式：

  1. 簡單請求：使用 GET、HEAD 或 POST 方法，且只允許安全上下文（即協(xié)議為 HTTPS、端口為 443 等）的請求。服務(wù)器在響應(yīng)頭中添加 Access-Control-Allow-Origin: * 即可。

示例代碼：

fetch('https://example.com/api/data', {
  method: 'GET',
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
  1. 預(yù)檢請求：對于除簡單請求之外的其他請求，瀏覽器會先發(fā)送一個預(yù)檢請求（OPTIONS 請求），詢問服務(wù)器是否允許跨域。服務(wù)器需要在響應(yīng)頭中添加 Access-Control-Allow-Origin: * 和 Access-Control-Allow-Methods 等頭信息。

示例代碼：

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

服務(wù)器端需要添加如下響應(yīng)頭：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type

除了 CORS 機制外，還可以使用 JSONP（JSON with Padding）方式進行跨域請求。但 JSONP 只支持 GET 請求，且需要服務(wù)器端配合。

0 踩