none
Failed to upload file into Azure Blob container in JavaScript due to "Access-Control-Allow-Origin"

    Question

  • Hi,

    As it said in title, I met a headache while trying to upload an image into Azure Blob container in JavaScript asynchronously. So I turn to you guys for some help, to make sure if I missed any factors or not. The case and step listed below:

    Firstly, generate the URL for request in back-end. Set the CORS rule for storage service, as coded (core code)below:
    Set CORS rule:

    var corsRule = new CorsRule()
    {
        AllowedHeaders = new List<String> { "*" },
        AllowedMethods = CorsHttpMethods.Put,
        AllowedOrigins = new List<String> { "*" },
        MaxAgeInSeconds = 1 * 60 * 60,
        ExposedHeaders = new List<String> { "x-ms-meta-*" }
    };
    return blobService.GetReadSASTokenUriWithName(fileName, 0.5, corsRule);

    if (corsRule != null)
    {
        var serviceProperties = blobClient.GetServiceProperties();
        var corsSettings = serviceProperties.Cors;
        corsSettings.CorsRules.Clear();
        corsSettings.CorsRules.Add(corsRule);
        blobClient.SetServiceProperties(serviceProperties);
    }
    container = blobClient.GetContainerReference(containerName);

    Get URL:

    var blobPermissions = new BlobContainerPermissions();
    var policyName = this.policyNameFormat.FormatWith(appName);
    blobPermissions.SharedAccessPolicies.Add(policyName, new SharedAccessBlobPolicy
    {
        SharedAccessExpiryTime = DateTime.UtcNow.AddHours(durationHours),
        Permissions = SharedAccessBlobPermissions.Read | SharedAccessBlobPermissions.Write
    });
    container.SetPermissions(blobPermissions);
    blobFileSASUri = blockBlob.Uri + blockBlob.GetSharedAccessSignature(null, policyName);


    Then assemble request and send request to upload file:

    var xhr = new XMLHttpRequest();
    xhr.open("PUT", blobUrl, true);
    xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
    xhr.setRequestHeader('x-ms-meta-m1', 'v1');
    xhr.setRequestHeader('x-ms-meta-m2', 'v2');
    xhr.addEventListener("load", _uploadComplete, false);
    xhr.addEventListener("error", _uploadFailed, false);
    xhr.send(fileContent);

    All things seems like it would work well, but sometimes it did not work. the Error formatted as below: 

    XMLHttpRequest cannot load {Request URL}. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '{domain of my service}' is therefore not allowed access. The response had HTTP status code 403.


    Would you guys give a hand on this case? Much appreciated.

    Thanks,

    Monday, December 19, 2016 9:07 AM

Answers

  • Hi Alaric Chan,

     

    Thank you for contacting Microsoft forums. We are pleased to answer your query.

    We are checking on the query and will get back to you soon on this.

    I apologize for the inconvenience and appreciate your time and patience in this matter.

     

    Regards,

    Bhanu Prakash

    Monday, December 19, 2016 7:54 PM

All replies

  • Hi Alaric Chan,

     

    Thank you for contacting Microsoft forums. We are pleased to answer your query.

    We are checking on the query and will get back to you soon on this.

    I apologize for the inconvenience and appreciate your time and patience in this matter.

     

    Regards,

    Bhanu Prakash

    Monday, December 19, 2016 7:54 PM
  • Hi Alaric,

    Thank you for contacting Microsoft forums. We are pleased to answer your query.

    From the error code you've shared it appears to be an issue with the CORS set-up. I would recommend you to refer the sample JavaScript code for uploading a blob to Azure Storage. The full code is also contained within that link which might be of help to you.

    Regards.

    Md. Shihab

    **************************************************************************

    Please remember to click "Mark as Answer" on the post that helps you as this can be beneficial to other community members reading the thread. And vote as helpful.

    • Proposed as answer by Md Shihab Tuesday, January 17, 2017 10:21 AM
    Tuesday, December 20, 2016 6:46 AM