1

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.

Improve this question
7
  • Where would the API_KEY and it's value go in the AJAX request? Is it as data or some other way? Commented Jan 25, 2017 at 14:50
  • 1
    Possible duplicate of How can I add a custom HTTP header to ajax request with js or jQuery? Commented Jan 25, 2017 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 Commented Jan 25, 2017 at 14:58
  • Is adding CORS secure enough or do I need extra security on top of that? Commented Jan 25, 2017 at 15:05
  • I found another possible duplicate. stackoverflow.com/questions/5750696/… . 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 Commented Jan 25, 2017 at 15:23

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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?
When you say configure the server, you mean my API?
Yes by configure the server, I mean whatever the .asax and .cs etc code on the server-side is that exposes the API.
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.
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?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.