Sec-Fetch-Mode, Sec-Fetch-Dest, Sec-Fetch-Site in request header creating CORS issue

Question

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?

score 1 · Accepted Answer · answered Mar 13 '21 at 13:35

1

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.

answered Mar 13 '21 at 13:35

Bukks

408
7
16

I have this issue too (non-CORS issues on the server being reported as CORS issues in the browser inspector). It's likely to do with the server app's error handling. – geoidesic Aug 28 '22 at 11:59

Sec-Fetch-Mode, Sec-Fetch-Dest, Sec-Fetch-Site in request header creating CORS issue

1 Answers1