如何繞過跨域AJAX請求的CORS限制？-js教程-PHP中文網

如何繞過跨域AJAX請求的CORS限制？

Patricia Arquette

發布： 2024-12-14 13:36:12

原創

536 人瀏覽過

How Can I Bypass CORS Restrictions for Cross-Domain AJAX Requests?

使用AJAX 載入跨域端點

簡介

跨域資源共享(CORS) 限制可能會阻礙AJAX 請求從不同域檢索資料域。本文研究了克服 CORS 限制的替代方法。

了解 CORS 限制

由於安全措施，瀏覽器強制執行同源策略，該策略限制同一域內的 AJAX 請求。對不同網域、子網域、連接埠或協定的請求通常會被封鎖。

避免 JSONP

使用 JSONP 檢索跨域資料需要伺服器以腳本格式提供回應。如果預期資料是 HTML，則不適合使用 JSONP。

替代解決方案

1. CORS 代理替代方案：

CORS Anywhere：將 CORS 標頭加入代理請求。
無論來源：提供跨域 JSONP 存取。
CORS 代理：Node.js 代理，支援任何物件的 CORS 請求網站。

2.繞過同源限制：

使用第三方代理（出於安全考慮，不建議）。
建立後端代理來處理跨域請求.

CORS 代理範例

CORS任何地方：

$.ajaxPrefilter( function (options) {
  if (options.crossDomain &amp;&amp; jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
  }
});

登入後複製

無論來源：

$.ajaxSetup({
    scriptCharset: "utf-8",
    contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' + 
    encodeURIComponent('http://google.com') + '&amp;callback=?',
    function (data) {
        console.log(" > " , data);
        $("#viewer").html(data.contents);
});

登入後複製