Question

我正在向我的images目录发出ajax请求。这在localhost上运行良好，但是当我把它放在网上时，我得到403（Forbidden）错误。我如何允许获取请求？

    $.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：

$(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'] 
})

然后是我的JS：

{{1}}

如何允许获取请求 - 403禁止错误

2 个答案: