I'm trying to embed Azure Dgital Twins 3d scene into a React application, using this exact repo
https://github.com/malichishti/adt-3d-embedder-app
The app uses msal to authenticate with the azure tenant.
I created all the infrastructure as mentioned there, but when I'm running the app, getting a 403 with blob access
GET http://localhost:3000/proxy/blob/3ds/3DScenesConfiguration.json? cachebust=1762260419270 403 (This request is not authorized to perform this operation using this permission.)
I added the host entry as well, to see if that could fix this, but it did not.
Here is the proxy,
const blobProxy = createProxyMiddleware({
changeOrigin: true,
headers: {
connection: 'keep-alive'
},
secure: true,
target: '/',
onProxyReq: (proxyReq) => {
// Remove all unnecessary headers
const newHeaderMap = {};
validHeaders.forEach((header) => {
const headerValue = proxyReq.getHeader(header);
// eslint-disable-next-line no-undefined
if (headerValue !== undefined) {
newHeaderMap[header] = headerValue;
console.log(headerValue);
}
});
Object.keys(proxyReq.getHeaders()).forEach((header) => {
proxyReq.removeHeader(header);
});
Object.keys(newHeaderMap).forEach((header) => {
proxyReq.setHeader(header, newHeaderMap[header]);
});
},
onProxyRes: (proxyRes) => {
Object.keys(proxyResponseHeaders).forEach((header) => {
proxyRes.headers[header] = proxyResponseHeaders[header];
});
},
pathRewrite: {
'/proxy/blob': ''
},
router: (req) => {
const blobHost = req.headers['x-blob-host'];
const blobHostUrl = `https://${blobHost}/`;
const blobHostUrlObject = new URL(blobHostUrl);
if (
validBlobHostSuffixes.some((suffix) =>
blobHostUrlObject.host.endsWith(suffix)
)
) {
return blobHostUrl;
}
throw new Error('Invalid Blob URL');
},
onError: (err, req, res) => {
const code = err.code;
if (code == 'ECONNRESET') {
if (
!req.currentRetryAttempt ||
req.currentRetryAttempt <= retryNumber
) {
req.currentRetryAttempt = req.currentRetryAttempt
? req.currentRetryAttempt++
: 1;
console.log(
'Proxy server retry request attempt number: ' +
req.currentRetryAttempt
);
blobProxy.call(blobProxy, req, res); // resend the original request to proxy middleware again
} else {
console.log(
'All proxy server retry attempts failed, returning error...'
);
res.status(504);
res.send(err.message);
}
} else {
switch (code) {
case 'ENOTFOUND':
case 'ECONNREFUSED':
res.status(504);
break;
default:
res.status(500);
}
res.send(err.message);
}
}
});
app.use('/proxy/blob', (req, res, next) =>
blobProxy.call(blobProxy, req, res, next)
);