我如何允许获取请求 - 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'] 
})