I've searched thoroughly but cannot find a solution to this issue in my particular circumstance.
Cross-domain service calls using Fiddler (POST) execute correctly and the data is received. However, through the browser (Chrome) I am getting the message 'preflight has invalid HTTP status code 404'
I have a Web API application and have installed CORS and ensured the following is present in the web.config file:
<system.webServer> <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> <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" /> </customHeaders> </httpProtocol> </system.webServer> Here is the Ajax call:
var secretKey = 'difusod7899sdfiertwe08wepifdfsodifyosey', url = 'http://api.intrinsic.co.uk/api/v1/PTS/ActiveDrivers?api_key=098werolllfWnCbPGAuIXVOJidDHRfYcgxImMlxTXopuekXrSOqOWzEAIdeNTWGPQPpyHxgVGsFysGFKPzq'; jQuery.ajax ({ url: url, type: "POST", data: JSON.stringify({ secretKey: secretKey}), dataType: "json", contentType: "application/json; charset=utf-8", success: function(data){ var content = "<table class=\"container\"><thead><tr><th>Driver Number</th><th>Timestamp</th><th>VRN</th><th>Latitude</th><th>Longitude</th><th>Track Link</th></tr></thead><tbody>"; $.each(data.ActiveDrivers.DriverLocationStatus, function (index, element) { content += "<tr><td>" + element.DriverNumber + "</td>"; content += "<td>" + dateFormat(element.Timestamp, "d/m/yy") + " " + dateFormat(element.Timestamp, "h:MM TT") + "</td>"; content += "<td>" + element.VRN + "</td>"; content += "<td>" + element.CurrentLatitude + "</td>"; content += "<td>" + element.CurrentLongitude + "</td>"; content += "<td><a href=\"https://www.google.co.uk/maps/place//@" + element.CurrentLatitude + "," + element.CurrentLongitude + ",15z/\" target='_blank'>Track »</a></td></tr>"; }); content += "</tbody></table>"; $( "#result" ).html( content ); } }); Obviously, works on the same domain perfectly and, as mentioned, it works using Fiddler.
I'm certain it is the browser's preflight OPTIONS check that is failing for content-type of 'application/json' but I'm not sure how to fix it.
Is there something missing in the web.config file that I should add?
I have tried removing 'content-type' with no affect.
I had hoped this article would solve the issue (it seemed promising) but the same error is encountered:
XMLHttpRequest cannot load [URL]. Response for preflight has invalid HTTP status code 404