Problem accessing api using jQuery $.ajax

Question

Problem accessing api using jQuery $.ajax

Asked 7 years, 10 months ago

Viewed 630 times

0

I’m having trouble accessing the api using the function $.ajax({}) jQuery.

The Error:

My code:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            function auth() {
                var credentials = {
                    apikey: "my_apiKey",
                    username: "myuser",
                    userkey: "my_userKey"
                };

                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "https://api.thetvdb.com/login",
                    data: credentials,
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                    }
                });
            }
            auth();
        </script>
    </head>
    <body>
    </body>
</html>

I tested using the program Advanced REST client, and worked perfectly, returned me the token.

I’m using the Chrome browser, but I tested in edge/ie and gave the same error.

Does anyone know how I can fix this??

3 answers

1

I will divide the answer into two parts.

Applications that simulate HTTP requests (Postman, or the one you are using) have no problems with CORS. They usually understand it as a request coming from a server (like a CURL, for example).
Regarding your problem, the error indicates that there is no CORS header in the api you are using. For this reason, you will not be able to access the API through your browser. To resolve this, you can create a kind of backend (Node, Python, PHP) that will perform this request to the Tvdb server. Creating this backend, you can, through Ajax for example, make a request for it, and it will make a request for the API, returning the response obtained in the service created by you, thus solving the problem with Cors.

If you still have doubts, take a look at this link https://stackoverflow.com/questions/38088869/angularjs-trying-to-make-a-json-post-request-to-a-rest-api-server-i-do-not-own-a

Browser other questions tagged javascript jquery ajax api

You are not signed in. Login or sign up in order to post.

by Allan Andrade • **6,409** points · Answer 1 · 2016-08-31T00:13:08+00:00

This error is happening because your system has different protocol and domain from the AJAX call.

Your AJAX request: https://api.thetvdb.com/

Your system: http://localhost:8080

To accomplish a bypass in the allow-orign, if you can edit the code in https://api.thetvdb.com/login, and the same is written in PHP, you can try to add:

header('Access-Control-Allow-Origin: *');

Remembering that with the line above you will be freeing cross site scripting for any domain.

by Kirmayr Tomaz • **440** points · Answer 2 · 2016-08-31T02:07:20+00:00

The mistake that is happening is because of CORS as the staff of mentioned.

Looking at your Postman log the best way to resolve this is by enabling backend for other domains .

In your case, as is the ngix vc will have to go in the configuration file of that address on your server and put something like this example below

location / {
 if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    #
    # Custom headers and headers various browsers *should* be OK with but aren't
    #
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    #
    # Tell client that this pre-flight info is valid for 20 days
    #
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
 }
 if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 }
 if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 }

}

was what I once used. Of that site when I had this problem