Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource, missing token ‘cache-control’ in CORS header

Question

I have the following function which should pass a JSON value to an external API:

ack_receipt();

function ack_receipt() {
  var app_name = "Test Trial Account for infobip";
  $.ajax({
    url: "http://api.infobip.com/2fa/1/applications",
    async: true,
    crossDomain: true,
    headers: {
      "authorization": "Basic xxxxxxxxxxxxxxx",
      "cache-control": "no-cache"
    },
    type: 'POST',
    dataType: 'JSON',
    data: {
      "name": app_name
    },
    success: function(data, status) {
      console.log(status);
    },
    error: function(x, status, error) {
      console.log(x, status, error);
      if (x.status == 403) {
        swal("Sorry, your session has expired. Please login again to continue");
      } else if (x.status == 404) {
        swal("Sorry, something went wrong from our side");
      } else {
        console.error("An error occurred: " + status + "nError: " + error);
      }
    }
  });
}

However, when I try to run the function from my browser I get the following warnings and the script fails on the way :

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.infobip.com/2fa/1/applications . (Reason: missing token 'cache-control' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

Kindly advise on how to handle the post and the Cache-control .

Answer 1

The Same Origin Policy: Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. https://en.wikipedia.org/wiki/Same-origin_policy

Actually for security reasons, modern browsers do not allow access across domains.

This means that both the web page and the and the JSON file it tries to load, must be located on the same server.

I also had face the same issue, and my work around was to send the request via an API which sits in my system (because browsers doesn't allow cross-origin, but not an issue for node or even you can make a curl request)

One of my friend also suggested to create a proxy server, but if you notice the step above is also like a proxy.