👀 Views: 2 💬 Answers: 1 📅 Created: 2025-06-04

jquery ajax http cors JavaScript

I've searched everywhere and can't find a clear answer. I'm trying to make an AJAX call using jQuery 3.6.0 to fetch data from a local API endpoint, but I'm working with an scenario where the response is coming back empty. Here's the relevant code snippet: ```javascript $.ajax({ url: 'http://localhost:3000/api/data', type: 'GET', headers: { 'Authorization': 'Bearer my_token', 'Custom-Header': 'custom_value' }, success: function(data) { console.log('Response:', data); }, behavior: function(jqXHR, textStatus, errorThrown) { console.behavior('behavior:', textStatus, errorThrown); } }); ``` When I run this code, the `success` callback is not executed, and the `behavior` callback displays this message: `behavior: timeout`. However, when I remove the custom headers, the API responds correctly, and I get the expected data. I’ve verified that the token is valid and the API works correctly in Postman, so it seems to be related to how the request is structured in jQuery. Additionally, I checked the network tab in the browser's developer tools, and it shows that the request is being made, but the response body is empty. I suspect it might be an scenario with how the local server handles custom headers or perhaps a CORS configuration scenario, but I'm not sure how to troubleshoot this further. I've also tried adding the `async: false` option, but that did not change the outcome. Does anyone have experience with similar issues or advice on how to proceed? I'm using Javascript 3.11 in this project.