HTML端點載入時如何解決跨網域AJAX請求？

使用 AJAX 載入跨網域端點

跨網域資源共用 (CORS) 是一種允許 Web 瀏覽器向其他網域上的資源發出要求的協定。但是，有一些限制可以防止惡意使用此功能。

問題

嘗試使用 AJAX 載入跨網域 HTML 頁面時，您可能會遇到問題，除非 dataType 為設定為「jsonp」。但是，使用 JSONP，瀏覽器需要腳本 mime 類型，但它收到的是「text/html」。另外，使用 crossDomain 參數並沒有解決問題。

解決方案

有幾種方法可以克服跨域障礙：

JSONP

JSONP（帶有Padding 的JSON）是一種透過將響應包裝在函數呼叫中來允許跨域AJAX 請求的技術。這可以透過將 dataType 參數設為“jsonp”並提供回調函數作為成功處理程序來實現。

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

CORS 代理

CORS 代理程式是中間伺服器，可用來繞過同種策略。他們將必要的標頭添加到請求中，以允許瀏覽器存取其他網域上的資源。在線上提供多種信譽良好的 CORS 代理服務。

$.ajax({
  type: "GET",
  url: "https://cors-proxy.com/crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

CORS Anywhere

CORS Anywhere 是一種流行的 CORS 代理伺服器，可用於從任何網域取得資源。

$.ajaxPrefilter(function(options) {
  if (options.crossDomain && $.support.cors) {
    options.url = "https://cors-anywhere.herokuapp.com/" + options.url;
  }
});

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

Whatever Origin

Whatever Origin 是一個使用 JSONP 的開源程式庫啟用跨域請求。

$.ajax({
  type: "GET",
  url: "http://whateverorigin.org/get?url=" + encodeURIComponent("crossdomainendpoint.com"),
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

請注意，雖然這些技術可以幫助克服跨域限制，但在使用外部資源時考慮安全影響並遵守同源策略的原則非常重要.

以上是HTML端點載入時如何解決跨網域AJAX請求？的詳細內容。更多資訊請關注PHP中文網其他相關文章！