CORS - Response to preflight request doesn't pass access control check: It does not have HTTP ok status

What can I do to make this running?

Backend: ASP .Net Web APP - API, IIS

Frontend: Vue

Error:

Fiddler:

web.config:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="x-requested-with, Content-Type, origin, authorization, accept, client-security-token" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    <add name="Access-Control-Max-Age " value="1000" />
  </customHeaders>
</httpProtocol>
<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" /> 
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
</handlers>

Conclusions so far:

The error goes away if I skip sending data in the post request.
I assume this is because I no longer will break SOP policy when the post data is not there.
A preflight request is only done when using some unsafe headers/methods/content types.

Please only answer if you have understanding of this matter (I'm sorry for this but looking in similar questions the responses are much of the kind "try this" and "try that" which makes it hard to identify the root cause and boost general understanding).

Solution

I found a solution here The requested resource does not support http method 'OPTIONS'.?

I found it after using fiddler to get better error details.

Removing both lines as suggested will make it work in development environment. However when deploying to production the last line must be added again to make it work.

Could it be the first handler is needed when you want to make more detailed CORS settings in the program. Feel free to improve this answer.

<handlers>
   <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<!--   <remove name="OPTIONSVerbHandler" /> -->
   <remove name="TRACEVerbHandler" />
   <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
 </handlers>

Allowing everything is not optimal when building a real solution for production.