Axios Pre-flight request is getting Access-Control-Allow-Origin however error says the header is not present - vue.js

Question

Headers received through preflight options call:
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: *
Allow: POST,OPTIONS
Still the error:
Access to XMLHttpRequest at 'http://192.168.29.7/rest/api/login' from
origin 'http://localhost:8080' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Backend: IIS,
Frontend: Vue (Axios):
return axios
.post('//192.168.29.7/rest/api/expenseAPI/login',credentials, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then(({ data }) => {
...
})
Please help.

Answer 1

try to install the cors module in iis and set the below code in web.config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>
</system.webServer>
https://www.iis.net/downloads/microsoft/iis-cors-module

Answer 2

Usually, CORS is not a frontEnd issue if you're using nodejs in the backEnd try to use CROS middleware if you're using Laravel you can make a middleware that returns
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
PS defaults header is axios is Content-Type: application/json you don't have to write that