Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Find the source of an XMLHttpRequest using Chrome/Firefox dev tools

I'm trying to debug a web application not written by me. There is a failing XMLHttpRequest being made:

XMLHttpRequest cannot load ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access. 

Is there a way, preferably using Chrome developer tools, to locate the source of this call?

like image 922
Steve Bennett Avatar asked Apr 16 '14 02:04

Steve Bennett


People also ask

How do I enable XMLHttpRequest in Chrome?

1. Open Chrome browser 2. Go to chrome://flags/#allow-sync-xhr-in-page-dismissal 3. Change the drop-down selection from “Default” or “Disabled” to “Enabled”.

How do I use cURL command in Chrome?

From Chrome On the line of the specific resource you're interested in, you right-click with the mouse and you select “Copy as cURL” and it'll generate a command line for you in your clipboard. Paste that in a shell to get a curl command line that makes the transfer.

What is XHR Chrome dev tools?

XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming.

How do I check API request and response in Chrome?

Step 1: Open the Chrome Developer ToolsGo to your Chrome Browser > Click on the Right Corner 3 Vertical Dots > More Tools > Developer Tools as shown in the below image. And this is what the Developer tools look like. Adjust the screen as per your convenience.

What is an XMLHttpRequest object?

All modern browsers have a built-in XMLHttpRequest object to request data from a server. The XMLHttpRequest object can be used to request data from a web server. The XMLHttpRequest object is a developers dream, because you can:

How do I send an HTTP request using XMLHttpRequest?

To send an HTTP request, create an XMLHttpRequest object, open a URL, and send the request. After the transaction completes, the object will contain useful information such as the response body and the HTTP status of the result. A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously.

How do I fetch data from XMLHttpRequest?

A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional async argument (the third argument) that is set on the XMLHttpRequest.open () method.

How can I use XMLHttpRequest to get a JSON configuration file?

Without requesting additional privileges, the extension can use XMLHttpRequest to get resources within its installation. For example, if an extension contains a JSON configuration file called config.json, in a config_resources folder, the extension can retrieve the file's contents like this:


1 Answers

It turns out - yes, there is. That "XHR Breakpoints" option on the side which I had always ignored:

enter image description here

It works perfectly.

Firefox has an identical feature:

enter image description here

like image 151
Steve Bennett Avatar answered Oct 13 '22 17:10

Steve Bennett