angularjs socket timeout in IE9

brnacl commented 10 years ago

I am running an Angular app on my local machine which connects to a local API via CORS. The app runs on localhost:8000, and the API runs on localhost:7999.

In the past I have counted on xdomain to handle my IE9 compatibility, but this time I'm not having any luck with it. Here's the console log from IE9...

LOG: xdomain (http://localhost:8000): adding slave: 'http://localhost:7999'

LOG: xdomain (http://localhost:8000): proxying request to slave: 'http://localhost:7999'

LOG: xdomain (http://localhost:8000): creating iframe xdomain-8f12dd3f

LOG: xdomain (http://localhost:8000): new socket: xdomain-20f6dbf3

xdomain (http://localhost:8000): Timeout waiting on iframe socket

I'm stumped. Thanks in advance.

jpillora commented 10 years ago

Does the angular example work?

On Friday, May 23, 2014, Brian Arenz notifications@github.com wrote:

I am running an Angular app on my local machine which connects to a local API via CORS. The app runs on localhost:8000, and the API runs on localhost:7999.

In the past I have counted on xdomain to handle my IE9 compatibility, but this time I'm not having any luck with it. Here's the console log from IE9...

LOG: xdomain (http://localhost:8000): adding slave: 'http://localhost:7999 '

LOG: xdomain (http://localhost:8000): proxying request to slave: ' http://localhost:7999'

LOG: xdomain (http://localhost:8000): creating iframe xdomain-8f12dd3f

LOG: xdomain (http://localhost:8000): new socket: xdomain-20f6dbf3

xdomain (http://localhost:8000): Timeout waiting on iframe socket

I'm stumped. Thanks in advance.

— Reply to this email directly or view it on GitHubhttps://github.com/jpillora/xdomain/issues/79 .

ghost commented 10 years ago

I'm having a similar issue. Our app has two different services as slaves. The one that works has unrestricted access (data-master="*"). The one that doesn't work has its masters defined via a script block. This service also requires a login/pwd.

When trying to call the service that doesn't work, we get an "Access Denied" error.

UPDATE One thing I just thought of is that the external service requires a login/pwd to access. When making a call via Angular's $.get(), we're passing this as a base64 encoded hash in the config.headers.Authorization and setting config.headers.withCredentials == true. I can access the proxy.html without logging in, but anything else requires these credentials. Does xDomain take this into account, or do I need to do something extra to configure this part?

Here is the relevant code:

index.html //<-- local.mydomain.com

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <!--[if IE 9]>
    <script src="http://jpillora.com/xdomain/dist/0.6/xdomain.js"></script>
    <script>window.isIE9 = true;</script>
    <![endif]-->

    <!-- Adobe Tag Manager -->
    <!-- Meta tags -->
    <!-- CSS includes -->
    <!-- jQuery -->
    <!-- Modernizer -->
    <!-- Adobe TypeKit -->
</head>
<body>
    <!-- Angular Bindings -->
    <!-- Analytics -->
    <!-- Online Opinion -->
    <!-- All Remaining .JS libraries, including Zurb Foundation, AngularJS and Bing Maps -->
</body>
</html>

app.js //<-- local.mydomain.com

'use strict';

var myApp = angular.module('myApp', ['...dependencies...']);

myApp.constant('urls', function () {
    //... returns service urls based on environment
    //... ex: searchApi = 'dev.api.search-domain.com'
   //... ex: solutionApi = 'beta.api.external-solution-domain.com'
});

myApp.run(['$window', 'urls', function ($window, urls)
{
    if ($window.isIE9 && xdomain)
    {
        var _slaves = {};
        _slaves[urls.searchApi] = "/proxy.html";
        _slaves[urls.solutionApi] = "/subdir/proxy.html";

        xdomain.debug = true;
        xdomain.slaves(_slaves);
    }

    //...misc analytics set-up...
}]);

proxy.html (working) //<-- http://dev.api.search-domain.com

<!DOCTYPE html>
<html>
<head>
    <title>XDomain Proxy - Slave</title>
    <script src="http://jpillora.com/xdomain/dist/0.6/xdomain.min.js" data-master="*"></script>
</head>
<body></body>
</html>

proxy.html (not-working) //<-- https://beta.api.external-solution-domain.com

<!DOCTYPE html>
<html>
<head>
    <title>XDomain Proxy - Slave</title>
    <!-- this is local copy (v 6.011) because service uses SSL -->
    <script src="scripts/xdomain.min.js"></script>
    <script>
        xdomain.masters({
            '*local.mydomain.com': '*', //<-- for local development
            '*mydomain.parent.com': '*' //<-- for all other servers (dev,qa,prod)
        });
    </script>
</head>
<body></body>
</html>

IE9 Console Log

initial page load
------------------
HTML1300: Navigation occurred.
File: local.mydomain.com

xdomain (http://local.mydomain.com): adding slave: http://dev.api.search-domain.com
xdomain (http://local.mydomain.com): adding slave: https://beta.api.external-solution-domain.com

//"failed to parse" messages...

**Initial Search Request**
--------------------------------------------
xdomain (http://local.mydomain.com): proxying request to slave: 'http://dev.api.search-domain.com'
xdomain (http://local.mydomain.com): creating iframe xdomain-e165a639
xdomain (http://local.mydomain.com): new socket: xdomain-41c4c005
xdomain (http://local.mydomain.com): receive socket: xdomain-41c4c005: 'ready'
xdomain (http://local.mydomain.com): send socket: xdomain-41c4c005: request
xdomain (http://local.mydomain.com): receive socket: xdomain-41c4c005: 'XD_CHECK': '[object Object]'
xdomain (http://local.mydomain.com): send socket: xdomain-41c4c005: ready
xdomain (http://local.mydomain.com): ready socket: xdomain-41c4c005 (emit #1 pending)
xdomain (http://local.mydomain.com): receive socket: xdomain-41c4c005: 'xhr-event': 'readystatechange'
xdomain (http://local.mydomain.com): receive socket: xdomain-41c4c005: 'xhr-event': 'readystatechange'
xdomain (http://local.mydomain.com): receive socket: xdomain-41c4c005: 'response'
xdomain (http://local.mydomain.com): send socket: xdomain-41c4c005: close
xdomain (http://local.mydomain.com): close socket: xdomain-41c4c005

//"failed to parse" messages...

**Second Request** (fails on call to second api)
--------------------------------------------
xdomain (http://local.mydomain.com): proxying request to slave: 'http://dev.api.search-domain.com'
xdomain (http://local.mydomain.com): new socket: xdomain-90bf844e
xdomain (http://local.mydomain.com): receive socket: xdomain-90bf844e: 'ready'
xdomain (http://local.mydomain.com): send socket: xdomain-90bf844e: request
xdomain (http://local.mydomain.com): receive socket: xdomain-90bf844e: 'XD_CHECK': '[object Object]'
xdomain (http://local.mydomain.com): send socket: xdomain-90bf844e: ready
xdomain (http://local.mydomain.com): ready socket: xdomain-90bf844e (emit #1 pending)
xdomain (http://local.mydomain.com): receive socket: xdomain-90bf844e: 'xhr-event': 'readystatechange'
xdomain (http://local.mydomain.com): receive socket: xdomain-90bf844e: 'xhr-event': 'readystatechange'
xdomain (http://local.mydomain.com): receive socket: xdomain-90bf844e: 'response'

xdomain (http://local.mydomain.com): no slave matching: 'https://beta.api.external-solution-domain.com'
Error: Access is denied.
{
  [functions]: ,
  description: "Access is denied.",
  message: "Access is denied.",
  name: "Error",
  number: -2147024891
}

//AngularJS error handler function (data, status, headers, errorConfig)
  console.log(data); //undefined
  console.log(status); //undefined
  console.log(headers); //undefined
  console.log(errorConfig) //<--
  //[object Object]
  //{
  //  [functions]: ,
  //  headers: { },
  //  method: "GET",
  //  transformRequest: [ ],
  //  transformResponse: [ ],
  //  url: "https://beta.api.external-solution-domain.com/subdir/foo?arg1=123456&arg2=10101&arg3=bim_boom_bam&arg4=1"
  //}

xdomain (http://local.mydomain.com): send socket: xdomain-90bf844e: close
xdomain (http://local.mydomain.com): close socket: xdomain-90bf844e

//more 'failed to parse' messages...

jpillora commented 10 years ago

Thanks for the detailed write up

        xdomain.masters({
            '*local.mydomain.com': '*', //<-- for local development
            '*mydomain.parent.com': '*' //<-- for all other servers (dev,qa,prod)
        });

Could you try with http:// in front?

If that still doesn't work, could you add xdomain.debug = true; to the proxy.html's xdomain, since your logs are only showing the master logs, not the slave logs

ghost commented 10 years ago

OK... So I removed the .masters() config section and added data-master="*" to the xdomain.js script tag in the failing proxy.html, and now it works, so this looks like a configuration issue. I'll try prefixing my domains with http:// and see if that works...

ghost commented 10 years ago

Ok, I prefixed the domain paths with http:// and this fixed my issue. Thanks for the help!

jpillora / xdomain

angularjs socket timeout in IE9 #79