Error while uploading the image to Azure Blob from a cordova application

Question

I am trying to upload a blob from Cordova Application and I am getting 404. However, the SAS URL is valid and working fine with a C# Application. Please find the code below:

var uriWithAccess = URL;
var xhr = new XMLHttpRequest();
xhr.onerror = fail;
xhr.onloadend = uploadCompleted;
xhr.open("POST", uriWithAccess);
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
xhr.setRequestHeader('x-ms-blob-content-type','image/jpeg');
xhr.send(requestData);

Any help will be appreciated. I tried with $.ajax as well but it's also giving 404 error.

PS: The code was working perfectly fine but from last few days it started causing the issue.

Thanks,

Mohit Chhabra

Answer 1

Have you configured CORS ? maybe the js request is failing because execution domain is not allowed in azure storage.

<Cors>    
      <CorsRule>
            <AllowedOrigins>http://www.contoso.com, http://www.fabrikam.com</AllowedOrigins>
            <AllowedMethods>PUT,GET</AllowedMethods>
            <AllowedHeaders>x-ms-meta-data*,x-ms-meta-target*,x-ms-meta-abc</AllowedHeaders>
            <ExposedHeaders>x-ms-meta-*</ExposedHeaders>
            <MaxAgeInSeconds>200</MaxAgeInSeconds>
    </CorsRule>
<Cors>

To set that configuration you can use azure Storage REST API, or more easily you can run a short C# program like this:

private static void InitializeCors()
{
     // CORS should be enabled once at service startup
     // Given a BlobClient, download the current Service Properties 
     ServiceProperties blobServiceProperties = BlobClient.GetServiceProperties();
     ServiceProperties tableServiceProperties = TableClient.GetServiceProperties();

     // Enable and Configure CORS
     ConfigureCors(blobServiceProperties);
     ConfigureCors(tableServiceProperties);

     // Commit the CORS changes into the Service Properties
     BlobClient.SetServiceProperties(blobServiceProperties);
     TableClient.SetServiceProperties(tableServiceProperties);
}

private static void ConfigureCors(ServiceProperties serviceProperties)
{
    serviceProperties.Cors = new CorsProperties();
    serviceProperties.Cors.CorsRules.Add(new CorsRule()
    {
        AllowedHeaders = new List<string>() { "*" },
        AllowedMethods = CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Post,
        AllowedOrigins = new List<string>() { "*" },
        ExposedHeaders = new List<string>() { "*" },
        MaxAgeInSeconds = 1800 // 30 minutes
     });
}

I'm not sure about what host you should use to enable access to a mobile application, but at first you should try with all host.

Access-Control-Allow-Origin: *

AllowedOrigins = new List<string>() { "*" },

You can follow a detailed guide here:

Windows Azure Storage: Introducing CORS