Ajax url GET 404 error

Question

I'm trying Ajax on loading all pictures inside one local folder onto my html page. Code references this question. Files run on (Tomcat 8.5) server in Eclipse first and I open url in Google Chrome. Then Ajax fails according to the console:

GET /Users/jiaqni/.../WebContent/upload 404 ()

Any idea what I did wrong? Relative path "dir='upload/';" neither works. Thanks guys!

<script>
    $(document).ready(function(){
        console.log("Image appending...");
        var dir = "/Users/jiaqni/.../WebContent/upload/";
        var regexp = new RegExp("\.png|\.jpg|\.jpeg");
        $.ajax({
            url: dir,
            success: function (data) {
                //List all .png .jpg .jpeg file names in the page
                console.log("Success!");
                $(data).find("a").filter(function(){return regexp.test($(this).text());}).each(function(){
                    var filename = this.href.replace(window.location, "");
                    ...
                });
            }
        });
    });
</script>

.htaccess was added to folder /User/.../upload/ to ensure it's browsable. And without Ajax, <img src="upload/xxx.jpeg"/> does display image in that folder.

The the URL path browsable? That is: can you open it in your browser and see all files in it? — puelo, Jun 19 '17 at 21:04
@puelo Yep, manually added .htaccess to make it browsable. I can view files with "file:///Users/jiaqni/.../upload" but not in Ajax. Should I add "file://" to my current path? It throws another error "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." — Jiaqing Ni, Jun 19 '17 at 21:10
@Monkey_Dev1300 Had I used relative path "" in html code the image would display. Can you tell whats wrong with using absolute path in html code? I got it from **right click => Get Info => Where** Moreover, Ajax is refusing to GET this URL (no matter absolute or relative path) — Jiaqing Ni, Jun 19 '17 at 21:20

score 0 · Accepted Answer · answered Jun 19 '17 at 21:13

0

I am guessing that the URL in question here refers to a local resource on your computer.

Unfortunately, this is not possible - usually browsers (e.g., Google Chrome) prevent you from doing so (due to privacy & security issues that may arise by allowing it).

You should put your files in your web server (e.g., Apache, ngnix, etc.) and adjust the URL of the AJAX request accordingly.

Good luck.

answered Jun 19 '17 at 21:13

Catalyst

1,018
2
12
19

That shouldn't stop me from visiting local resource in Eclipse IDE right? Besides, html was able to display local images with explicit code (even in the browser). So I assume only Ajax is blocked? – Jiaqing Ni Jun 19 '17 at 21:29
Yes, only AJAX is blocked. You can read here for more info: https://stackoverflow.com/questions/17947971/ajax-in-jquery-does-not-work-from-local-file – Catalyst Jun 19 '17 at 21:38
Thank you! Due to deploy problems I couldn't use XAMPP. I've tried placing my folder with images in **apache-tomcat-8.5.15/temp/** and **apache-tomcat-8.5.15/wtpwebapps/ProjectName/** but neither solves the problem. Could you tell where in server folder is the right place for Chrome accessibility? Besides, why would** --disable-web-security** not work? I know it's not the best solution... – Jiaqing Ni Jun 20 '17 at 21:01

Ajax url GET 404 error

1 Answers1