如何允许获取请求 - 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/，它是一个目录路径。根据您的 cmets 之一，您无法使用 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'] 
})