CODEWITHSUNDEEP
phpangularjscurlxdebug
Alex Leibovich
Alex Leibovich

Reputation: 315

XDebug doesn't stop on breakpoints after http request

I'm developing an app with AngularJS in the Front End and PHP in the Back End.

They communicate with REST.

The front end implements browsersync to refresh on updates.

I'm debugging the PHP code with XDEBUG in PhpStorm.

Before we started using BroswerSync, the PHP code would pause on a breakpoints after a request was sent to the server, now it doesn't work... We tested with other tools like Postman and the internal REST client in PhpStorm, and the code does manage to pause, but not from the Angular itself.

Upvotes: 1

Views: 1681

Answers (1)

Alex Leibovich
Alex Leibovich

Reputation: 315

I was trying to find a way to easily repeat the HTTP requests so i could debug multiple times without filling the same data (like forms) again and again...

I would open GET requests in new tab (by right clicking on the request in the Chrome Dev Network tab), the breakpoints would work, but not POST requests.

Somehow, with the help of Stack Overflow, i found that copying the request from Chrome Dev as a CURL and adding --cookie "XDEBUG_SESSION=PHPSTORM" would trigger the XDebug.

Generally, to trigger XDebug from Chrome, you need to install "XDebug Helper". That led me to a conclusion that one of the "XDebug Helper" functions is to add a cookie that will trigger the XDebug.

The solution to this problem was to add withCredentials: true to Angular HTTP requests. So it would look like:

$http.get(path, {withCredentials: true});

var options = { 
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                withCredentials: true
              }

$http.post(path, params, options);

Also, there is need to update the response headers on the server side:

header("Access-Control-Allow-Origin: http://localhost:3000");
header("Access-Control-Allow-Credentials: true");

Note that you need to set the origin depending on where you send the requests from. This also adds a layer of security, because before that we would just use * and accept requests from everywhere.

For easier configuration of multiple hosts:

$http_origin = $_SERVER['HTTP_ORIGIN'];

//The static method returns an array of hosts
if (in_array($http_origin, Config::getAllowedOrigins()))
{
    header("Access-Control-Allow-Origin: $http_origin");
    header("Access-Control-Allow-Credentials: true");
}

Hope this explanation will be helpful!

Upvotes: 2

Related Questions