1 year ago
#386917
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