Ajax POSTing and CORS preflight error with IISExpress on Localhost using MVC 5

Question

I'm testing an Ajax request to an external address using Visual Studio and IIS Express on my Localhost. (I've tested this request using Fiddler and it works ok!)

When i run it, I see the following in the browser (Chrome) console:

Access to XMLHttpRequest at 'https://api.example.com/' from origin 'https://localhost:44306' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've trawled SO and I've tried adding the following:

<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,PUT,POST,DELETE,HEAD,OPTIONS" />
        <add name="Access-Control-Expose-Headers" value="*" />
        <add name="Access-Control-Request-Headers" value="*" />
        <add name="Access-Control-Request-Method" value="GET,PUT,POST,DELETE,HEAD,OPTIONS" />
        <add name="X-Frame-Options" value="DENY" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

To my project's web.config and C:\Users\xxx\Documents\IISExpress\config\applicationhost.config. I've also tried adding headers in my Global.asax such as: void Application_PreSendRequestHeaders

And I've tried setting them as part of the Ajax request like so:

 var newDataRequest = $.ajax({
            type: "post",
            url: 'https://api.example.com/',
            crossDomain : true,
            crossOrigin: true,
            headers: {
                "Accept": "application/json",
                "Content-Type":"application/json",
                "Access-Control-Allow-Origin":"https://localhost:44306/",                    
                "Access-Control-Expose-Headers":"*",
                "Access-Control-Request-Headers":"access-control-allow-credentials,access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,access-control-expose-headers,access-control-max-age,content-type,key,x-frame-options",
                "Access-Control-Allow-Methods" : "GET,PUT,POST,DELETE,HEAD,OPTIONS",
                "Access-Control-Allow-Headers" : "Content-Type,Authorization,Accept",
                "Access-Control-Max-Age" : 1728000,
                "Access-Control-Allow-Credentials" : true,
                "X-Frame-Options":"DENY"
            },
            data: {},
            timeout: 60000
            }).done(function (data) {
                
            }).fail(function (jqXHR, textStatus) {
               
            }).always(function (jqXHR, textStatus) {
                stopSpinner();
            });

Here are a few references to the things I have tried above:

Web.config customHeaders not returned in a response

Response to preflight request doesn't pass access control check (Angular2)

CORS problems in WebAPI hosted in IIS

Any other suggestions please? I'm running out of ideas!

Thanks!

https://blog.lextudio.com/how-to-install-microsoft-cors-module-for-iis-express-7ac24e4c3bc4 — Lex Li, Apr 16 '21 at 12:39

score -1 · Answer 1 · answered Apr 16 '21 at 19:14

I think this was an issue when trying to call an external API from client-side code (as opposed to server-side code).

To get around this in MVC, i pointed my ajax request to a LOCAL action like so:

url: '@Url.Action("Action", "Controller")'

and then in the action method (decorated with the [HttpPost] attribute), I used HttpWebRequest to successfully make a request to the external API.

Ajax POSTing and CORS preflight error with IISExpress on Localhost using MVC 5

1 Answers1