我如何允許獲取請求 - 403禁止錯誤

Question

我正在向我的圖像目錄發出ajax請求。這在localhost上運行良好，但是當我將它放到網上時，我得到一個403（禁止）錯誤。我如何允許獲取請求？

$.ajax({  
     url: url, 
     success: function(data) { 
     var parser = new DOMParser(), 
      doc = parser.parseFromString(data, 'text/html'); 
     var rows = doc.querySelector('table').querySelectorAll('tr'); 
     for (var i=0;i<rows.length;i++) { 
      if (rows[i].children[2]) { 
       var img = rows[i].children[2].children[0].getAttribute("href"); 
       if(img.match(/\.(jpeg|jpg|gif|png)$/) != null){ 
        var html = '<li id="" style="background-image: url('+img+')"></li>';    
        $('#nikoSlider ul').append(html) 
       } else { console.log("This is not a valid image type: " + img) } 
      } 
     } 
     nikoSlider(); 
     } 
    }); 

我可以在php文件中使用header('Access-Control-Allow-Origin: *');之類的東西嗎？

Answer 1

您的url的形式是http://primaryman.com/pare/assets/images/{{COLLECTION}}/slider/，它是一個目錄的路徑。根據您的評論之一，您無法使用AJAX訪問目錄。下面是解決問題的最簡單方法：

創建一箇中間人PHP腳本，它返回所需的所有圖像路徑的json編碼數組。然後在您的AJAX成功回調中，遍歷圖片並將它們附加到DOM。由於COLLECTION部分路徑是可變的，因此無論使用何種路徑，都需要一種總是調用此PHP腳本的方法。我建議在您的AJAX調用中更改url以直接調用PHP腳本併爲其提供您想要的集合。例如，如果你想訪問royce或summit集合，你會使用

url: '/path/to/slider_images.php?collection=royce //<- or collection=summit 

在你的PHP腳本，你可以找到與最初請求的URL路徑：

$path = "/pare/assets/images/$_GET[collection]/slider/" 

然後，您可以使用它來獲取匹配目錄中的所有圖像文件（請記住只選擇帶有圖像擴展名的文件），將它們放入$images陣列中，並將它們發送回瀏覽器：

echo json_encode($images); 

This solution（您之前鏈接的）有很好的代碼來幫助您入門。

Answer 2

@Patrick感謝您的建議，我發現您的答案有幫助。我結束了這樣的事情，我肯定不是最優的，但對於這個特定的項目工作正常。我借巨資從403 Forbidden error while making an ajax request

allow.php：

<?php 

$filenameArray = array(); 
$summit = array(); 
$royce = array(); 
$soundview = array(); 
$merrit = array(); 
$hillcroft = array(); 


$all = array(); 


$handle = opendir(dirname(realpath(__FILE__)).'/assets/images/summit/slider/'); 
    while($file = readdir($handle)){ 
     if($file !== '.' && $file !== '..'){ 
     array_push($filenameArray, "assets/images/summit/slider/$file"); 
     array_push($summit, "assets/images/summit/slider/$file"); 

     } 
    } 
array_push($all, $summit); 


$handle = opendir(dirname(realpath(__FILE__)).'/assets/images/royce/slider/'); 
    while($file = readdir($handle)){ 
     if($file !== '.' && $file !== '..'){ 
     array_push($filenameArray, "assets/images/royce/slider/$file"); 
     array_push($royce, "assets/images/royce/slider/$file"); 

     } 
    } 
array_push($all, $royce); 

$handle = opendir(dirname(realpath(__FILE__)).'/assets/images/soundview/slider/'); 
    while($file = readdir($handle)){ 
     if($file !== '.' && $file !== '..'){ 
     array_push($filenameArray, "assets/images/soundview/slider/$file"); 
      array_push($soundview, "assets/images/soundview/slider/$file"); 

     } 
    } 
array_push($all, $soundview); 

$handle = opendir(dirname(realpath(__FILE__)).'/assets/images/merrit-station/slider/'); 
    while($file = readdir($handle)){ 
     if($file !== '.' && $file !== '..'){ 
      array_push($filenameArray, "assets/images/merrit-station/slider/$file"); 
      array_push($merrit, "assets/images/merrit-station/slider/$file"); 

    } 
    } 
array_push($all, $merrit); 

$handle = opendir(dirname(realpath(__FILE__)).'/assets/images/hillcroft-danbury/slider/'); 
    while($file = readdir($handle)){ 
     if($file !== '.' && $file !== '..'){ 
     array_push($filenameArray, "assets/images/hillcroft-danbury/slider/$file"); 
       array_push($hillcroft, "assets/images/hillcroft-danbury/slider/$file"); 

     } 
    } 
array_push($all, $hillcroft); 

echo json_encode($all); 


?>  

然後我的JS：

$(document).ready(function(){/* Loop thru images folder */ 

    var page = ['summit','royce','soundview','merrit-station','hillcroft-danburmer'].indexOf(window.location.href.split('/').pop()) 
    console.log(page); 


    var url = "allow.php"; 
    $.ajax({  
     url: url, 
      dataType: "json", 

     success: function(data) { 
      console.log(data); 
      console.log(data); 
      $.each(data[page], function(i,filename) { 
       console.log(filename); 
     var img = filename; 
     var arr = img.split('/'); 
     console.log(arr[arr.length-3]) 

     if(img.match(/\.(jpeg|jpg|gif|png)$/) != null && arr[arr.length-3] == window.location.href.split('/').pop()){ 
      var html = '<li id="" style="background-image: url('+img+')"></li>';    
      $('#nikoSlider ul').append(html) 
      console.log(html); 
     } else { console.log("This is not a valid image type: " + img) } 


     }) 


     nikoSlider(); 
     } 
    }); 
//rows[i].children[2] $(rows[i].children[2]).find('attr', 'href').context.textContent $(rows[i].children[2]).text() rows[i].children[2].querySelector('a')['href'] 
})