Why are my POST requests blocked by CORS when deployed but it works locally

Question

I have an Angular 9 frontend and a VB.NET Web API 2 backend.

When running both locally it works fine, however when they are deployed all the POST requests are getting blocked by CORS. (GET works fine, though that seems to be simply because they do not trigger the preflight check and so CORS is not relevant. Please correct me if I'm wrong on this assumption!)

The frontend is at mydomain.com and the backend on a subdomain at api.mydomain.com. They are both hosted on the same server (Godaddy shared Windows hosting, IIS 8 via Plesk)

I have this in my web.config:

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept, authorization" />
      </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>

And this in Global.asax:

Protected Sub Application_BeginRequest()
    If Request.Headers.AllKeys.Contains("Origin") AndAlso Request.HttpMethod = "OPTIONS" Then
        Response.Flush()
    End If
End Sub

When sending a POST request I get these in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.mydomain.com/xyz. (Reason: CORS preflight response did not succeed). Status code: 405.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.mydomain.com/xyz. (Reason: CORS request did not succeed). Status code: (null).

If I check the headers in the Network tab in browser dev tools, the "Origin" header in the request has the same value as the "access-control-allow-origin" header in the response.

Why is this not working, even though the allowed origin is set to "*"? (Changing that will be the next fun problem...)

It seems to be a common issue as I have read through umpteen SA questions and other articles but still cannot find what's missing!

I am not sure about asp.net but it looks like your options call is failing rather than the post call. Whatever `Response.Flush()` does, try commenting it out and making the call. If that works, check why you are doing that on Options call. — Vivek V Dwivedi, Dec 19 '21 at 12:55
Well yes, the options call is failing and not allowing the browser to send the post call itself. That bit of code I got from here: https://stackoverflow.com/questions/27504256/mvc-web-api-no-access-control-allow-origin-header-is-present-on-the-requested, without it it does not work even on localhost. — Sparrowhawk, Dec 19 '21 at 13:21

score 0 · Accepted Answer · edited Dec 19 '21 at 21:35

I found the answer after another read through one of the threads I mentioned in the earlier comment.

Basically remove this line from the web.config:

<remove name="OPTIONSVerbHandler" />

I had seen this mentioned several times as something to add in order to make it work, and as it was there by default in my file I never touched it.

As I understand it, this tells IIS whether to handle the options request or leave it up to your code.

Why are my POST requests blocked by CORS when deployed but it works locally

1 Answers1