0

I am working on my first API project and, also, I am new to this technology.

I have been successful in implementing "GET" method on Nasa's API https://api.nasa.gov/planetary/apod and also on dog API https://dog.ceo/api/breeds/image/random on both local as well as remote server.

But when I try to "GET" in the API developed by a private institution it works fine in Postman but not on my local server. It keeps showing Access to XMLHttpRequest at '(api url)' from origin '(localserver)' has been blocked by CORS policy. No 'Access-Control-Allow-Origin' header is present on the requested resource.

HTML Doc:

<!DOCTYPE html>
<html>
    <head>
        <title>API</title>
    </head>
    <body>
        <div>
            PRINT
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <script src="./script.js"></script>
    </body>
</html>

AJAX Request:

$.ajax({
    url: "api",
    method: "GET",
    data: {
        "Key": "(myapikey)",
        "UserID": "userid",
        "Password": "pass",
        "AwbNo": "someNumber"
    },
    success: function(data){
        console.log(data);
    },
}).fail(function(){
    console.log("error in script");
});

I tried the solutions like including the allow-access-control-origin header but it still showed the same error. Please help.

Edit 1:

I added the the following two lines to my ajax code:

crossDomain: true,
dataType: 'jsonp'

and now it shows the following error:

Cross-Origin Read Blocking (CORB) blocked cross-origin response "(api request)" with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Edit 2:

Added in AJAX code:

header:{
        "Access-Control-Allow-Origin":"*"
    }

Still showing the same errorenter image description here

Ishan Agarwal
  • 17
  • 3
  • 1
    Does this answer your question? [Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i) – Beller Mar 10 '21 at 05:36
  • No, I already tried that solution but it didn't work for me. – Ishan Agarwal Mar 10 '21 at 05:38
  • 1
    CORS is implemented at the server side , either allow all the domain to access the APIs or just the domain from which you are trying to access. Server should return "Access-Control-Allow-Origin":"*" or "Access-Control-Allow-Origin":"your-domain" – Akash Mar 10 '21 at 09:43
  • Thanks @Akash for your comment but I have already tried your solution. I have also shared the screenshot of the error for your reference. – Ishan Agarwal Mar 10 '21 at 09:46
  • You have to change the server side implementation , not the client side. You ajax is client calling the server APIs, so server should allow your domain to access the APIs . As in the error it says No 'Access-Control-Allow-Origin" header is present on the requested resource. It means server is not sending any header which says your domain can access the APIs – Akash Mar 10 '21 at 09:49
  • Thank you @Akash for the explanation. It, really, is helpful. – Ishan Agarwal Mar 10 '21 at 10:19

1 Answers1

0

CORS mechanizm in a web browser won't let you get resources from your api unless api would send you response with header Access-Controll-Allow-Origin with value of your domain or with wildcard (*).

So you must to change api response to return you this header Access-Controll-Allow-Origin=<protocol://your_domain:port> or if you don't have access to changing api you can write simple proxy (simple rest api) to redirect request from your browser to actual endpoint.

Piterowsky
  • 90
  • 2
  • 9
  • Thanks for your help but this solution somehow doesn't work for me. I have uploaded the error screenshot too for your kind reference. – Ishan Agarwal Mar 10 '21 at 09:43
  • I see that you have added this header on the client side request but I said to modify endpoint on server side (backend). Do you have access to change something on server where you send request? – Piterowsky Mar 10 '21 at 09:45
  • No, I don't have access to server side code. Is there any work around? – Ishan Agarwal Mar 10 '21 at 09:56
  • Yes, you can implement simple rest api which would contain an endpoint which will be executing you request. Your frontend (1) -> your simple rest api (2) -> api where you want send request (3) Access-Controll-Allow-Origin should be set in simple proxy api (2) and contains value of of your frontend (1) – Piterowsky Mar 10 '21 at 10:00
  • Thank you for your kind revert. It will be really helpful if you could direct me to some resources about how to implement the above. – Ishan Agarwal Mar 10 '21 at 10:17