1 year ago

#386917

test-img

chandan

Getting cors issue while connecting azure datalake in javascript (browser vue js)

i am getting cors issue while trying to connect with azure data lake in vue js app

export default class CustomTokenCredential {
 token;
 expiresOn;
 constructor(token, expiresOn) {
     this.token = token;
     if (expiresOn == undefined) {
         this.expiresOn = Date.now() + 60 * 60 * 1000;
     } else {
         this.expiresOn = expiresOn.getTime();
     }
 }

 async getToken(_scopes, _options) {
     return {
         token: this.token,
         expiresOnTimestamp: this.expiresOn,
     };
 }
}

this is the config file after msal authentication i am getting token

let token = localStorage.getItem("tokencredential");
token = JSON.parse(token);
const tokencredential = new CustomTokenCredential(token)
let todayDate = new Date().toJSON().slice(0, 10).replace(/-/g, '-');
let gmtDate = new Date().toString()

    let datalakeService = new DataLakeServiceClient(
        `https://accountname.dfs.core.windows.net`,
        tokencredential
    )

 datalakeService.pipeline.options.headers = {
        'Content-Type': "application/json",
        "x-ms-version": todayDate,
        "x-ms-date": gmtDate,
        "authorization": `Bearer ${token}`
        // "Accept": "*/*",
        // 'accept-encoding': 'gzip, deflate',
        // 'Host': "https://ompstoragedevelopment.dfs.core.windows.net"
    }


these are the code that try to get all containers
async function getContainer(){
 let i = 1;
      let fileSystems = this.datalakeService.listFileSystems();
      for await (const fileSystem of fileSystems) {
        console.log(`File system ${i++}: ${fileSystem.name}`);
      }
}

then i am getting these kind of errors(i changed to accountname from original account name) , dont know where is issue coming from ,please guide me

also tried with rest api ,here are codes please check
 let token = localStorage.getItem("setAccessToken");
      token = JSON.parse(token);
      let todayDate = new Date().toJSON().slice(0, 10).replace(/-/g, '-');
      let gmtDate = new Date().toString()
      axios.get("https://account.dfs.core.windows.net?resource=filesystem", {
        headers: {
          'Content-Type': "application/json",
          "x-ms-version": todayDate,
          "x-ms-date": gmtDate,
          "authorization": `Bearer ${token}`
        }
      }).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
Access to XMLHttpRequest at 'https://accountname.blob.core.windows.net/?comp=list&_=1649331391770' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhrHttpClient.js?0815:74          GET https://accountname.blob.core.windows.net/?comp=list&_=1649331391770 net::ERR_FAILED
profile:1 Access to XMLHttpRequest at 'https://accountname.blob.core.windows.net/?comp=list&_=1649331391770' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

javascript

azure

vue.js

azure-active-directory

azure-data-lake

0 Answers

Your Answer

Accepted video resources