Getting Issue while upload files on azure data lake storage

Question

I have two application

1. first application for frontend :- which is responsible to take file from local storage and send that files azure functions via API
2. 2nd application for backend:- which is responsible to take file from form-data (multipart) and upload files to azure data lake storage When i execute this azure function API on postman it works perfectly. but when i am trying to call this API from my web APP it says

Access to XMLHttpRequest at 'https://func-release-mgmt-sandbox-ci.azurewebsites.net/api/add-pcb-master' from origin 'https://aas-release-mgmt-fe-sandbox-ci-1-h5czgddubyhuc3bj.centralindia-01.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The below code is to upload blob on datalake storage

async function uploadFileToAzureDataLakeStorage(fileBuffer, destFileName, directoryName, context) {
    try {
        const blobServiceClient = new BlobServiceClient("sasUrlForDatalakdeStorage");
       
        // Get a reference to a container
        const containerClient = blobServiceClient.getContainerClient("containerName");

       
        // Create a block blob client
        const finalDest = directoryName + "/" + destFileName;
        const blockBlobClient = containerClient.getBlockBlobClient(finalDest);

        console.log('UPLOAD BLOB');

        // Upload the file
        const uploadResponse = await blockBlobClient.upload(fileBuffer, fileBuffer.length, {
            blobHTTPHeaders: { 
                blobContentType: 'application/octet-stream'
             }
        });

        return blockBlobClient.url;
    } catch (ex) {

        return throwErrorMessage(context, 500, JSON.stringify({
            "error": ex.message
        }))
    }
}

local.settings.json file

 "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  },

I have also attached CORS policy configuration screen shot.

Answer 1

Hi @Akshay Bahir

Greetings! Welcome to Microsoft Q&A Forum. Thanks for posting you query here!

As per the error message, it indicates that the API you're trying to access does not include the Access-Control-Allow-Origin header in its response. It means that the server (your Azure Function) is not configured to allow requests from the origin of your web app.

To fix this problem, make sure CORS is set up correctly on your Azure Function. You need to ensure that the Azure Function is configured to allow cross-origin requests from your web application. Here are the steps to do it:

• Configuration for your Azure function is done correctly from your Web app's origin.
• Make sure your Azure Function code includes the necessary CORS headers in the response.

In the Function code make sure you Set the allowed Origins and Set the allow HTTP methods as well as Set the allowed request headers.

AllowAnyHeader affects preflight request and the Access-Control-Request-Headers header. To allow specific headers to be sent in a CORS request, called author request headers, call WithHeaders and specify the allowed headers. specify the allowed headers.

If the preflight request is denied, the app returns a 200 OK response but doesn't set the CORS headers. Therefore, the browser doesn't attempt the cross-origin request.

The browser can skip the preflight request if all the following conditions are true:

• The request method is GET, HEAD, or POST.
• The app doesn't set request headers other than Accept, Accept-Language, Content-Language, Content-Type, or Last-Event-ID.
• The Content-Type header, if set, has one of the following values:
• application/x-www-form-urlencoded
• multipart/form-data
  • text/plain

If you are using a different language or framework for your Azure Function, make sure to add the appropriate headers in the response.

Hope the issue will be resolved by following the above linked documents by using the appropriate headers

Please feel free to contact if the issue persists, we will be glad to assist you closely. Please do consider to click on "Accept Answer" and "Up-vote" on the post that helps you, as it can be beneficial to other community members.