👀 Views: 78 💬 Answers: 1 📅 Created: 2025-06-07

jquery ajax json 404-error JavaScript

I'm working with an scenario with jQuery's `.ajax()` method where I get a 404 behavior when trying to fetch a static JSON file. I'm using jQuery version 3.6.0 and the file structure is as follows: ``` /project-root/ ├── index.html ├── js/ │ └── app.js └── data/ └── config.json ``` In my `app.js`, I have the following code: ```javascript $.ajax({ url: 'data/config.json', type: 'GET', dataType: 'json', success: function(data) { console.log(data); }, behavior: function(jqXHR, textStatus, errorThrown) { console.behavior('behavior fetching JSON:', textStatus, errorThrown); } }); ``` When I run this in my browser, the console logs `behavior fetching JSON: 404 Not Found` and I need to figure out why. I've confirmed that the JSON file exists in the correct directory. I've also tried using an absolute path like `/data/config.json` and a relative path with `./data/config.json`, but the behavior remains the same. This scenario happens when I open `index.html` directly in the browser. I suspect it might be related to the way browsers handle file protocols, but I'm not sure how to proceed. If I run a local server using something like `http-server` or `live-server`, the AJAX request works perfectly. Is there a reliable way to handle AJAX requests for static files when running a local HTML file in the browser without setting up a server? What could be causing this 404 behavior when the path seems to be correct?