Cannot set Authorization header in ajax call

[Cam]

Hi,

So I've got a bit of a problem setting authorization headers in my request to a webservice from my appbuilder app. I don't think it's a cors issue because it's working fine except I can't seem to set any headers in the request. both of these work when calling from an html page and the headers a set correctly but the headers are empty from the mist emulator. 

So just trying to set the headers like this doesn't seem to set them
$.ajax({
                url: 'http://myapp.com/api/scheduledworkouts',
                headers: {
                    "Authorization":"Basic " + btoa($('#username').val() + ":" + $('#password').val())
                }
            });

This doesn't work either

$.ajax({
                url: 'http://myapp.com/api/scheduledworkouts',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Authorization",
                        "Basic " + btoa($('#username').val() + ":" + $('#password').val()));
                }
            });

[Tina Stancheva]

Hi Cam,

I used the first code snippet you posted (defining the headers attribute) and I was able to successfully pass the headers with my request. I used Google Chrome developer tools with the AppBuilder In-Browser simulator to make sure the headers are properly passed.

However, please note that if the request is coming from a domain different than the one it is targeting, then it will only be successful if the target's response contains an Access-Control-Allow-Origin header in it. This is why if your page/service at http://myapp.com/api/scheduledworkouts is not configured to present such a header, an error message will be displayed in the Console of the browser's developer tools. The error will read: "No 'Access-Control-Allow-Origin' header is present on the requested resource."

This error indicates that when the request was sent, the browser couldn't find the Access-Control-Allow-Origin header. This is why only the OPTIONS request succeeds without sending a POST request at all.

Please open the console and make sure there is no such error. If there is, then the solution would be to add the Access-Control-Allow-Origin to the target domain. The approach for adding it, depends on the server/language behind that address. Sometimes a configuration variable in the tool will do the trick. Other times you'll have to add the headers through code yourself.

If you don't see any errors in the console, please send us a screencast or a screenshot of the network information available within the browser's developer tools. You can also run FiddlerCap (with the Decrypt HTTPS Traffic option enabled) before launching your app in the AppBuilder In-Browser client. This is a tool that will intercept the HTTP requests the simulator performs and give you the option to save them to disk. We will need the FiddlerCap capture to see the requests send on your side.

Regards,
Tina Stancheva
Telerik