Why is adding an extra header making the AJAX call fail

Question

AJAX call:

$.ajax({
    url: "http://myserver2:296/api/Demo/HelloWorld",
    type: "GET",
    dataType: 'JSONP',
    jsonp: "callback",
    headers: { 'API_KEY': 'mykey09090' },
    success: function (result) {
        console.log(result);
    },
    error: ajaxFailed
});

function ajaxFailed(xmlRequest) {
    alert(xmlRequest.status + ' \n\r ' +
          xmlRequest.statusText + '\n\r' +
          xmlRequest.responseText);
}

I get the following error: Failed to load resource: the server responded with a status of 403 (Forbidden). However when I use Postman, I just have to add the headers with the http://myserver2:296/api/Demo/HelloWorld url it returns the string.

Can I please get some assistance to resolve the issue.

My goal, is to allow the origin server along with the API key correctly provided to get the data back from the Web Api.

Where would the `API_KEY` and it's value go in the AJAX request? Is it as `data` or some other way? — Si8, Jan 25 '17 at 14:50
Possible duplicate of [How can I add a custom HTTP header to ajax request with js or jQuery?](http://stackoverflow.com/questions/7686827/how-can-i-add-a-custom-http-header-to-ajax-request-with-js-or-jquery) — Fran, Jan 25 '17 at 14:51
I tried that and it didn't work for me unfortunately. I am still getting `Failed to load resource: the server responded with a status of 403 (Forbidden)` error — Si8, Jan 25 '17 at 14:58
Is adding CORS secure enough or do I need extra security on top of that? — Si8, Jan 25 '17 at 15:05
I found another possible duplicate. http://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working . I would set the crossDomain option in ajax. if that's not sending the cors header. Manually add the cors header like you are the api key — Fran, Jan 25 '17 at 15:23
How can I use another security so not everyone can access the API beside the CORS? — Si8, Jan 25 '17 at 15:29

score 1 · Accepted Answer · answered Jan 25 '17 at 17:10

1

Adding the API_KEY header to the request triggers your browser to first send a CORS preflight OPTIONS request. Any headers you add to a request other than headers defined as CORS-safelisted request-headers will trigger your browser to send a CORS preflight OPTIONS request.

I can’t tell for sure but it seems like the 403 you’re seeing is from your server responding to that OPTIONS request, and saying it doesn’t expect to get OPTIONS requests and doesn’t allow them.

The reason you don’t get this from Postman is that unlike browser engines, Postman does not implement CORS, so it does not send the OPTIONS request. (Postman does not operate under the same-origin Web-security model that browsers enforce for Web applications.)

So to make your client app work as expected for scripted cross-origin access to that server, you must configure the server to respond in the right way to that CORS preflight OPTIONS request.

answered Jan 25 '17 at 17:10

sideshowbarker

81,827
26
193
197

Thank you for the response. It makes sense why it works without the API-KEY... any help or guide on the last part? Is having CORS makes it somewhat or alot secure? – Si8 Jan 25 '17 at 18:20
When you say configure the server, you mean my API? – Si8 Jan 25 '17 at 18:28
Yes by configure the server, I mean whatever the .asax and .cs etc code on the server-side is that exposes the API. – sideshowbarker Jan 25 '17 at 18:45
So in general the only good reason to use CORS to restrict access to a resource is if both the following are true: 1/ if the resource is in an intranet or otherwise behind a firewall of some kind & 2/ if within that intranet/firewall, access to the resource is only restricted by assuming if a user has an IP address inside the intranet/firewall, then it’s OK for them to access the resource. If that’s not the case here then you gain nothing from using restrictive CORS. And if you’re putting other authentication on the resource you also don’t gain from adding CORS restrictions. – sideshowbarker Jan 25 '17 at 18:48
Thank you for the steps. As far as your first comment, is there a guide on how to achieve it step by step? Also if I do what is needed based on the comment, I can remove cors? – Si8 Jan 25 '17 at 18:55
I guess the best general guide on CORS is the [HTTP access control (CORS) article](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). It’s not really step-by-step by that’s because a lot of the steps are often specific to whatever server-side programming environment you use to deliver your Web content. For ASP.Net there’s some minimal specific documentation at http://enable-cors.org/server_aspnet.html, and then Microsoft’s own docs on it at https://learn.microsoft.com/en-us/aspnet/core/security/cors look quite good. – sideshowbarker Jan 26 '17 at 00:58
As far as whether you should do as far as CORS, it really depends on what you’re trying to accomplish. But if your goal is passing some sort of pentest, I really don’t think CORS is going to affect that one way or the other. – sideshowbarker Jan 26 '17 at 01:01

Why is adding an extra header making the AJAX call fail

1 Answers1

Linked