1

I have this simple API call that is working in POSTMAN:

enter image description here enter image description here

Real simple. Works perfectly.

However, I've tried to replicate this in jQuery like follows:

$.ajax({
    url: "https://example.us-east-1.amazonaws.com/prod",
    type: "POST",
    contentType: "application/json",
    data: {
        id_api: "catalogo_get_categorias"
    },
    success: function(results){
        console.log(results)
    },
    error: function(err) {
        console.log(err)
    }
});

But it keeps coming back with 500 error.

Any ideas?

Edit:

The console produces the following error when I have the Chrome CORS extension disabled

enter image description here

And with the CORS plugin enabled this is the output enter image description here

Jack Robson
  • 2,184
  • 4
  • 27
  • 50

2 Answers2

1

Postman isn't bound to the same-origin policy like your browser (Chrome) is. If the API endpoint that you're requesting - https://example.us-east-1.amazonaws.com/prod - doesn't respond with a CORS header like Access-Control-Allow-Origin: *, you'll hit the exception that you've posted.

To solve the problem, your options are basically:

  1. Add the CORS header(s) to the response, if AWS allows.
  2. Route the request through a proxy server, so that the server makes the actual request to AWS, and isn't bound to the same-origin policy.

Also be sure that the $.ajax() request sets the appropriate headers by using pertinent config object properties. For example, you may need to set the xhrFields.withCredentials property on the config object you pass to $.ajax():

$.ajax({
  url: "https://example.us-east-1.amazonaws.com/prod",
  type: "POST",
  contentType: "application/json",
  xhrFields: {
    withCredentials: true
  },
  data: {
    id_api: "catalogo_get_categorias"
  },
  success: function (results) {
    console.log(results);
  },
  error: function (err) {
    console.log(err);
  }
});
Bungle
  • 19,392
  • 24
  • 79
  • 106
  • 1
    _"Postman makes requests using a server"_ <- not really a server, just a client not restricted by the same origin policy – Phil Jun 17 '18 at 23:13
  • _"Also be sure that the $.ajax() request includes the appropriate headers"_ <- the `Origin` header is automatically added by the browser for cross-origin requests. Even if OP adds one, it will be overwritten – Phil Jun 17 '18 at 23:14
  • Thanks, @Phil - I've updated my answer with your feedback. – Bungle Jun 17 '18 at 23:21
  • Why `withCredentials`? OP has not mentioned any cookie-based authentication. Also, as is the issue with OP's code, you are not serializing the data as JSON. All of this is covered in the two duplicates I've flagged in the question comments – Phil Jun 17 '18 at 23:33
0

If you are using node.js and express this answer will help.

add the following lines to your server.js file 

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

if you are having the same error go through THESE answers to a similar question.

David Arun
  • 45
  • 1
  • 9
  • Where did OP indicate they were using Express on the server-side? – Phil Jun 17 '18 at 23:34
  • I had a similar error when working with node.js so I assumed it to be the same here too. I will edit the answer. – David Arun Jun 17 '18 at 23:41
  • The error is generic (it's localised to the HTTP layer) and is totally independent of the particular technology used – Phil Jun 17 '18 at 23:43
  • if I want to understand the error in depth what keyword searches would you suggest?. I just started exploring server-side programming. – David Arun Jun 17 '18 at 23:47
  • It's always best to search for the error message itself. Start here ~ https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present. The MDN docs are also a great resource ~ https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – Phil Jun 17 '18 at 23:50