詳解ajax跨域問題解決方案

2024-09-01 08:27:09

字體：大中小

來源：轉載

供稿：網友

今天來記錄一下關于ajax跨域的一些問題。以備不時之需。

跨域

同源策略限制

同源策略阻止從一個域上加載的腳本獲取或操作另一個域上的文檔屬性。也就是說，受到請求的 URL 的域必須與當前 Web 頁面的域相同。這意味著瀏覽器隔離來自不同源的內容，以防止它們之間的操作。

解決方式

通常來說，比較通用的有如下兩種方式，一種是從服務器端下手，另一種則是從客戶端的角度出發。二者各有利弊，具體要使用哪種方式還需要具體的分析。

服務器設置響應頭服務器代理客戶端采用腳本回調機制。

方式一

Access-Control-Allow-Origin 關鍵字只有在服務器端進行設置才
會生效。也就是說即使再客戶端使用

xmlhttprequest.setHeaderREquest('xx','xx');

也不會有什么效果。

正常ajax請求

下面來模擬一下ajax非跨域請求的案例實現。

test1.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax 測試</title></head><body><input type="button" value="Test" onclick="crossDomainRequest()"><div id="content"></div><script> var xhr = new XMLHttpRequest(); var url = 'http://localhost/learn/ajax/test1.php'; function crossDomainRequest() {  document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";  // 延遲執行  setTimeout(function () {   if (xhr) {    xhr.open('GEt', url, true);    xhr.onreadystatechange = handle_response;    xhr.send(null);   } else {    document.getElementById('content').innerText = "不能創建XMLHttpRequest對象";   }  }, 3000); } function handle_response() {  var container = document.getElementById('content');  if (xhr.readyState == 4) {   if (xhr.status == 200 || xhr.status == 304) {    container.innerHTML = xhr.responseText;   } else {    container.innerText = '不能跨域請求';   }  } }</script></body></html>

同級目錄下的test1.PHP內容如下：