0

Estou tendo dificuldades para acessar a api usando a função $.ajax({}) do jQuery.

O Erro:

inserir a descrição da imagem aqui

O meu código:

<!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>

Testei usando o programa Advanced REST client, e funcionou perfeitamente, me retornou o token.

inserir a descrição da imagem aqui

Estou usando o navegador chrome, mas testei no edge/ie e deu o mesmo erro.

Alguém sabe como posso fazer para resolver isto??

0

3 Respostas 3

1

Vou dividir a resposta em duas partes.

  1. Aplicações que simulam requisições HTTP (Postman, ou a que você está usando) não tem problemas com CORS. Eles geralmente entendem como se fosse uma requisição vinda de um servidor (igual um CURL, por exemplo).
  2. Com relação ao seu problema, o erro indica que não existe cabeçalho CORS na api que você esta utilizando. Por este motivo, você não irá conseguir acessar a API através do seu browser. Para resolver isso, você pode criar uma espécie de backend (Node, Python, PHP) que irá efetuar essa requisição para o servidor do TvDB. Criando esse backend, você poderá, através do Ajax por exemplo, efetuar uma requisição para ele, e ele irá efetuar uma requisição para a API, retornando a resposta obtida no servico criado por você, resolvendo assim o problema com o Cors.

Caso você ainda tenha duvidas, da uma olhada nesse link https://stackoverflow.com/questions/38088869/angularjs-trying-to-make-a-json-post-request-to-a-rest-api-server-i-do-not-own-a

0

Este erro está acontecendo porque o seu sistema está com protocolo e domínio diferentes da chamada AJAX.

Sua requisição AJAX: https://api.thetvdb.com/

Seu sistema: http://localhost:8080

Para realizar um bypass no allow-orign, caso você possa editar o código em https://api.thetvdb.com/login, e o mesmo estiver escrito em PHP, você pode tentar adicionar:

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

Lembrando que com a linha acima você estará liberando cross site scripting para qualquer domínio.

0

O erro que está acontecendo é por causa de CORS como o pessoal de mencionou.

Olhando seu log do postman a melhor forma de resolver isso é habilitando o backend para outros domínios .

No seu caso, como é o ngix vc terá que ir no arquivo de configuração desse endereço no seu servidor e colocar algo como esse exemplo abaixo

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';
 }

}

foi o que utilizei uma vez. Desse site quando tive esse problema

1
  • Interessante, porém a api que estou tentando acessar é de terceiros, eu não tenho acesso ao servidor..
    – MeuChapeu
    1/09/2016 às 0:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .