Problem accessing api using $ .ajax from jQuery

Navigation
0

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

The Error:

Mycode:

<!DOCTYPEhtml><html><head><scriptsrc="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 it worked perfectly, it returned me token .

I'm using the chrome browser, but I tested it on edge / ie and gave the same error.

Does anyone know how I can do this?

    
asked by anonymous 31.08.2016 / 01:48

3 answers

2

I'll 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 as if it were a request from a server (like a CURL, for example).
  • Regarding your problem, the error indicates that there is no CORS header in the api that you are using. For this reason, you will not be able to access the API through your browser. To solve this, you can create a kind of backend (Node, Python, PHP) that will make this request to the TvDB server. By 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 questions, take a look at this link link

        
    • 31.08.2016 / 02:13
    0

    This error is occurring because your system has different protocol and domain than the AJAX call.

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

    Your system: http://localhost:8080

    To make a bypass in allow-orign , if you can edit the code in https://api.thetvdb.com/login , and it is written in PHP, you can try adding: 

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

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

        
    31.08.2016 / 02:13
    0

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

    Looking at your postman log, the best way to resolve this is to enable the backend for other domains.

    In your case, as is ngix you will have to go to 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';
 }

    }

    That's what I used once. From that site when I had this problem

        
    31.08.2016 / 04:07
    Detect destkop & mobile How to know which div is displayed on the screen with javascript?