Proxy for external Requests is broken

chrisschaub commented 7 years ago

PhoneGap CLI, node & npm versions

Phonegap 6.3.3, Node 4.6, npm 2.15.9

Ionic CLI has a local proxy where you can map local to remote proxy urls in a config file to avoid CSRF and CORS and related errors when doing local dev with a remote data source. http://blog.ionic.io/handling-cors-issues-in-ionic/

I can't get the phonegap cli --proxy switch to work with phonegap serve, and the doc is not very clear to me. Just adding /proxy/ to my urls didn't work, and I have tried a bunch of variations on that theme. If I want to always proxy requests at http://data.example.com so my local app in browser thinks its localhost data source, how do I do this? I would rather not disable Chrome security and use Ripple if at all possible. Thanks for any help.

timkim commented 7 years ago

Hi @chrisschaub

Hrm, the old --proxy command was for some legacy issues (before the content-sync plugin in the PhoneGap Developer App) so it's collected some dust since then.

From my initial observations, it doesn't seem the proxy code is actually being passed down to the client. I'll need to investigate further.

filmaj commented 7 years ago

It looks like the proxy option (which defaults to true) gets passed straight to connect-phonegap's listen method.

So connect-phonegap monkeypatches XHR that redirects URLs bound for different hostnames to a /proxy/<url>. It then looks like a connect-phonegap middleware called proxy.js picks those requests up and does the work of making the cross-origin requests on behalf of the client.

I tried to get this feature working based on my understanding above:

Created a simple blank phonegap app: phonegap create test --template blank.
Added the browser platform: cd test; phonegap platform add browser.
Edited the index.html that comes with that to do a basic cross-origin XHR (with the hopes that the connect-phonegap proxy logic will kick in):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Blank App</title>
    </head>
    <body>
        <h1><a id="link" href="#">Click me nao!</a></h1>
        <div>
            <h3>XHR results:</h3>
            <p id="results"></p>
        </div>
        <script type="text/javascript">
            var link = document.getElementById('link');
            var results = document.getElementById('results');
            function handler(evt) {
                var oReq = new XMLHttpRequest();
                oReq.onreadystatechange = function() {
                    if (oReq.readyState === XMLHttpRequest.DONE) {
                        if (oReq.status === 200) {
                            results.innerHTML = oReq.responseText;
                        } else {
                            results.innerHTML = 'xhr failed! http status code: ' + oReq.status;
                        }
                    }
                };
                oReq.open("GET", "http://www.phonegap.com/robots.txt");
                oReq.send();
            }
            link.addEventListener('touchstart', handler);
            link.addEventListener('click', handler);
        </script>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

Serve it up: phonegap -d serve
When I go to issue the cross-origin XHR, it fails. The network tab of my browser is pretty informative and gives clues as to what is going on:

Looks to me like the request URL is pointing to the right spot: http://192.168.0.183:3000/proxy/http%3A%2F%2Fwww.phonegap.com%2Frobots.txt. So, the client-side proxy XHR monkeypatch seems to be working.
However, the server response is returning a HTTP 301 Redirect code, and giving the location http://undefined/proxy/http://www.phonegap.comhttp://phonegap.com/robots.txt - that can't be good!
Finally, the client app tries to follow the directions of the HTTP 301 Redirect, but since the domain is 'undefined', it fails:

Side note: for some reason, you can also see two of these requests being issue - why?

@surajpindoria @timkim - looks like this is a legit bug. And it probably is in connect-phonegap, right?

filmaj commented 7 years ago

After digging in a bit more in connect-phonegap, it, on its own, seems to work fine with proxying (I tested it with the http://phonegap.com/robots.txt case I tried above). So there must be something else happening causing the http://undefined redirect, possibly in phonegap serve itself. Need to dig more.

filmaj commented 7 years ago

So I think the underlying issue here is trying to proxy URLs that return 3xx redirect HTTP status codes. And the bug exists in connect-phonegap. Please track phonegap/connect-phonegap#197 for updates on the issue.

In short:

connect-phonegap tries to munge the Location header it returns to the app if the response to the proxy is a redirect.
that bit of code is buggy, results in a malformed URL that points back to the proxy middleware.
the browser, then, as is standard behaviour, tries to re-issue a network request for any HTTP redirects it is responded to with.
the proxy middleware picks up this second request once more, but because it is malformed, dies (due to another bug phonegap/connect-phonegap#191).

phonegap / phonegap-cli

Proxy for external Requests is broken #652

PhoneGap CLI, node & npm versions