Jquery ajax call returns URL and load into frame or div

I have a client-side web-app which is all static html and javascript, and I use JQuery. I am more of a back-end/middle-ware guy with Spring, and so I am not really good withthe front-end stuff.

I have a RESTful API from my client UI to my middle-ware web app written in Spring as a Controller. I can call this successfully, and there is middle-ware business logic where I can a third-party API and it returns HTML. I return this HTML to my client and I was trying to load it in an iframe or within a div tag. Of course, I got all kinds of javascript errors and a lot of CORS issues. So, if this isn't a feasible option to get HTML from another web-site and deploy it on my page, then I am willing to let that go.

I created another RESTful API on my back-end that now just returns a URL this third-party RESTful API. Specifically, I am calling the authorization page for Coinbase, but it could easily be any other third-party authorization page. I have the full URL that they recommend, and I am ready to do something with it.

So, I get a URL (dataType is 'text') like this, and I can see it with an alert:

https://www.coinbase.com/oauth/authorize?
  response_type=code&client_id=MY_CLIENT_ID
  &redirect_uri=MY_REDIRECT_URL
  &state=SECURE_RANDOM
  &scope=wallet:accounts:read

I figure I would do a redirect as follows:

window.location.replace(response);

but, what happens is I get an HTTP 404 because my system is pre-pending my UI locahost to that url. So, it looks like:

http://localhost:8080/my_web_ui_app/https://www.coinbase.com/oauth/authorize?
  response_type=code&client_id=MY_CLIENT_ID
  &redirect_uri=MY_REDIRECT_URL
  &state=SECURE_RANDOM
  &scope=wallet:accounts:read

And obviously, that is not going to work as I get the HTTP 404 error.

Anything else I should try? Like I said, I am not a good UI guy, but I just need something that works ok.

Thanks!

Solution

It was the Ajax call itself.

$.ajax({
        url : 'http://localhost:8080/myapp-be/api/myrestapi/authorize',
        headers : {'token' : token},
        dataType: 'text',
        cache: false,
           success: function(response) {
               console.log(response)
               $(location).attr('href',response);
           }
    });

The dataType: 'text' was the culprit.

The URL was the response, and as 'text', it added another layer of quotes around the response.

Once I removed the dataType from the Ajax call, then the default dataType worked and I no longer got a URL with extra quotes. On success, I was able to do a simple redirect and that worked. Was a simple fix.

Thank goodness for Chrome and the debugging tools so I could see that the response coming back had that extra quotes around it.