How to do a POST request with headers?

Question

Right now, I'm trying to do a post request:

https://aleapisoap.azure-api.net/httpbin/listSearchFields

And I need a body which is this:

{
  "listSearchFields": {
    "email": "sample"
  }
}

I tried this in postman and works but with this code in JavaScript doesn't work.

$.ajax({
                    url: 'https://aleapisoap.azure-api.net/httpbin/listSearchFields',
                    headers: {
                        'Content-Type':'application/json',
                        'Cache-Control':'no-cache',
                        'Ocp-Apim-Trace':'true',
                        'Ocp-Apim-Subscription-Key':'19f2a7fd474840bfb5fc729cd97b7335'
                    },
                    type: 'POST',
                    dataType: 'jsonp',
                    data: '{"listSearchFields":{"email":"sample"}}',
                    success: function(data){
                    console.log('succes: '+data);
                    }
                });

This is the error:

net::ERR_ABORTED 404 (Resource Not Found)

Even with postman it is returning `Unexpected ','` and with `AJAX` also same — Hary, Nov 16 '18 at 15:36
Try this [link](https://learn.microsoft.com/en-us/azure/api-management/api-management-howto-api-inspector) and enable the trace please — Hary, Nov 16 '18 at 15:37
yeah but with postman it retrieves response, with javascript it doesn't — Miguel Barra, Nov 16 '18 at 15:50
If doesn't work from your app, because of the CORS policy. You specified `jsonp` type, so usually you should have an additional key in your $.ajax configuration object, that holds the function that has to be called in order for this to work. Do you have some kind of documentation? — chrisg86, Nov 16 '18 at 15:51
No, I don't I just created an api management on azure, it gives me a request url and now I am consume it — Miguel Barra, Nov 16 '18 at 15:58

score 0 · Answer 1 · answered Nov 16 '18 at 15:39

0

The headers in your $.ajax() call look correct to me. I think the "listSearchFields" endpoint doesn't exist at https://aleapisoap.azure-api.net/httpbin/ like you're expecting. Check your spelling first - if you're spelling "listSearchFields" correctly, you'll have to dive deeper to figure out why it's not being found.

answered Nov 16 '18 at 15:39

Mike Waldron

334
2
10

If you run it from postman, it does indeed return data. I suspect it rejects GET requests with a 404. – chrisg86 Nov 16 '18 at 15:57
The $.ajax() call is a POST, though. – Mike Waldron Nov 17 '18 at 04:36

score 0 · Answer 2 · answered Nov 16 '18 at 16:16

dataType: 'jsonp',

JSONP requests are incompatible with setting custom request headers or making POST requests. They work by injecting a <script> element with a src attribute (which makes a GET request).

If you need to make a POST request, don't use that dataType. You probably want 'json'.

JSONP is a hack that was used to work around the Same Origin Policy before CORS was available. You might have to take other steps to ensure the endpoint is available to your origin.

How to do a POST request with headers?

2 Answers2