Search code examples
javascripthtmljquerycorssap-basis

Cross Origin Resource Sharing (CORS) issue

We have some web services returning xml+atom response. These are hosted on SAP NetWeaver Gateway application server. They require BASIC authentication to access them. The response contains the following headers to support CORS:

access-control-allow-origin: *
access-control-allow-methods: POST, GET, OPTIONS, PUT, DELETE, HEAD
access-control-allow-headers: Content-Type
access-control-max-age: 1728000

We have an HTML5 app which uses jquery to call the service as below:

var url = "http://mytesturl.com/test/";
    $.ajax({
        url: url,
        async: true,
        contentType:"application/atom+xml", 
        type: "GET",
        crossdomain: true,
        beforeSend: function (xhr) {
        xhr.setRequestHeader('Authorization', make_base_auth(uname, passwd));
        }
    })
            .done(function( data, textStatus, jqXHR ){alert("success");})
       .fail(function( jqXHR, textStatus, errorThrown ){
            console.log(jqXHR.status);
            alert(errorThrown + jqXHR.status);
        });

Despite the headers coming in the server response, we continue to get the CORS errors as below:

Failed to load resource: the server responded with a status of 401 (Unauthorized)
Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access.

The username (uname) and password (passwd) are correct. If I try calling the service using a tool like RestClient, I can see the headers in the response. I have tried testing in Chrome version 31.0 and Safari version 6.0.5. I am not sure what is missing. Any suggestions to help resolve the issue would be great.

Thanks.

Solution

  • You seem to have forgotten to include the Authorization header in the list of allowed headers:

    access-control-allow-headers: Content-Type, Authorization

    Your client code is sending an Authorization header (the Basic authentication stuff), so the server must explicitly allow this at the CORS level.

    Also ensure that the server is actually responding with those headers for an OPTIONS verb request from the client.