Request is working with Postman but generated snippet does not

Question

So I am trying to send a GET Request in my JavaScript via AJAX. The problem is that I can send the Request in Postman and it works fine. When I use the feature to generate the AJAX code and I insert it in the my local index.html the Request seems to be blocked.

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "http://www.bibsonomy.org/api/posts?resourcetype=bookmark&group=ukp&format=json",
    "method": "GET",
    "headers": {
        "Authorization": "Basic key",
        "Cache-Control": "no-cache"
    }
}

$.ajax(settings).done(function (response) {
    console.log(response);
});

Console output:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
 at https://www.bibsonomy.org/api/posts?resourcetype=bookmark&group=ukp&format=json. 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I have no idea why it is not working and why Postman does not get this error.

Answer 1

Please add Access-Control-Allow-Origin: * in the header of the request.

Answer 2

You should try to add this to your settings

xhrFields: {
   withCredentials: true
},
crossDomain: true

Answer 3

This has to be handled from the server side. Only if the server adds a header that the it permits requests from localhost:port(if you are in development), or you can add

set Access-Control-Allow-Origin: "*" for accepting requests from all clients, browser will be able to successfully complete the request.

The cross origin validation is a browser provided security against Cross domain attacks. The browser sends a preflight (OPTIONS) request to the server to ensure the request will be a valid one, and on successful return only a valid request will be sent. So the reliable way to fix this, is a fix in the api provider(server) to accept requests from your domain/localhost.

However you can do a work around for just your browser, you can check this answer for such a method.