On the backend endpoint that I am requesting from my website using axios, most of the browsers do not have "sec-fetch-mode" and "sec-fetch-site" set on the request headers and they seem to work fine.
However, few browsers set the headers sec-fetch-mode:cors, sec-fetch-dest: empty and sec-fetch-site:same-site, and in that case the connection is closed and the browser console shows the following error.
Access to XMLHttpRequest at 'https://site-url.xyz/endpoint1' from origin
'https://xxx.site-url.xyz' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.
The backend has the following config:
response.headers.add('Access-Control-Allow-Origin', "*")
response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Authorization')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,OPTIONS')
response.headers.add('Strict-Transport-Security', 'max-age=31536000; includeSubDomains')
Is there a way to control these headers from code, either from front-end or from backend?
So the issue was with Nginx configuration on the backend. It could only accept max file size of 1MB by default. So some people were able to upload docs and some were not. It's weird that I was seeing CORS issue on console.