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

Question

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 repsonses are much of the kind "try this" and "try that" which makes it hard to identify the root cause and boost general understanding). Thanks for considering this.

Answer 1

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.

Answer 2

The accepted solution did not work for me. So this might help someone

Adding below code to Application_BeginRequest at Global.asax worked for me:

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:7777/");

if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
    //These headers are handling the "pre-flight" OPTIONS call sent by the browser
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "content-type");
    HttpContext.Current.Response.End();
}

Use desired urls , Methods and Headers

Also There is no need to change any thing in Web.config

Answer 3

if you're on Mozilla, you should consider going to see the "CORS everywhere" extension at https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/ It might solve your problem.

EDIT : Ok, don't do that, sorry for my ignorance.