I have a Static web app in Azure. It's written with Reactjs and I want to download the response of calling an API.
return new Promise((resolve, reject) => {
fetch('URL', {
method: 'GET',
headers: {
Authorization: 'Bearer ${token}',
Accept: 'text/csv',
},
})
.then((res) => (res.ok ? res.blob() : Promise.reject(new Error('File not found'))))
.then((blob) => {
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.csv');
console.log('data received from backend', blob);
link.click();
resolve();
})
.catch(({ message }) => reject(message));
});
It's working on my local system but I have a problem when it's deployed on a Azure Static web app.
When I trigger the download file button the CSV file contains the HTML code below.
<html lang="en">
<head>
<meta charset="utf-8"/>
<base href=""/>
<link rel="icon" href="/favicon.png"/>
<meta name="viewport" content="width=device-width initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="logo192.png"/>
<link rel="manifest" href="manifest.json"/>
<title>My website</title>
<link href="/static/css/2.a86954d2.chunk.css" rel="stylesheet">
<link href="/static/css/main.58874b1d.chunk.css" rel="stylesheet"/>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"/>
<script>!function(e){function r(r){for(var n a l=r[0] i=r[1] p=r[2] c=0 s=[];c<l.length;c++)a=l[c] Object.prototype.hasOwnProperty.call(o a)&&o[a]&&s.push(o[a][0]) o[a]=0;
for(n in i)Object.prototype.hasOwnProperty.call(i n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u p||[]) t()}
function t(){for(var e r=0;r<u.length;r++){for(var t=u[r] n=!0 l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r-- 1) e=a(a.s=t[0]))}return e}var n={} o={1:0} u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r l:!1 exports:{}};
return e[r].call(t.exports t t.exports a) t.l=!0 t.exports}a.m=e a.c=n a.d=function(e r t){a.o(e r)||Object.defineProperty(e r {enumerable:!0 get:t})}
a.r=function(e){"undefined" !=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e Symbol.toStringTag {value:"Module"})
Object.defineProperty(e __esModule {value:!0})} a.t=function(e r){if(1&r&&(e=a(e)) 8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;
var t=Object.create(null);if(a.r(t) Object.defineProperty(t default {enumerable:!0 value:e}) 2&r&&"string"!=typeof e)for(var n in e)a.d(t n function(r){return e[r]}.bind(null n));
return t} a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r a r) r} a.o=function(e r){return Object.prototype.hasOwnProperty.call(e r)}
a.p="/" ;var l=this["webpackJsonphandbook-admin-panel" ]=this["webpackJsonphandbook-admin-panel" ]||[] i=l.push.bind(l);l.push=r l=l.slice();for(var p=0;p<l.length;p++)r(l[p]);var f=i;t()}([])
</script><script src="/static/js/2.cacac8cc.chunk.js"/>
<script src="/static/js/main.bbc25d92.chunk.js"/>
</body>
</html>
