My code and request is like this :

async function download(e, siswa) {
console.log(siswa)
e.preventDefault();
await axios({
  url: `${process.env.REACT_APP_API_KEY}public/images/${siswa.siswa_gambar}`,
  method: 'GET',
  responseType: 'blob',
}).then(res => {
  console.log(res)
  const url = window.URL.createObjectURL(new Blob([res.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', siswa.siswa_gambar);
  document.body.appendChild(link);
  link.click();
})

But i keep getting cors error even tho i've set cors option to "*"

const corsOptions = {
    origin: '*',
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    credentials: true
};
app.use(cors(corsOptions));

like so, what should i do?

CodePudding user response：

CORS Should Always Be Handled From Server Side!

You don't have to handle it from the front-end, ensure that your backend team has pass the CORS headers inside their request then you will get rid of this error. In the backend set the request's mode to 'no-cors' to fetch the resource with CORS disabled. It states that there's a missing Access-Control-Allow-Origin header on the resource you requested. If you think about it, your client doesn't have anything to do with CORS so it should always be handle from the server side