2

Pessoal eu estou com uma aplicação teste em Angular 5 e estou tentando consumir o WebService do cartola. Ao realizar essa tentativa aparece o seguinte erro:

Failed to load https://api.cartolafc.globo.com/mercado/status: The 'Access-Control-Allow-Origin' header has a value 'https://cartolafc.globo.com' that is not equal to the supplied origin. Origin 'https://localhost:4200' is therefore not allowed access.

Eu sei que para questões de teste eu posso simplesmente desativar essa validação seja via plugin ou por outra opção. Mas e no caso de uma aplicação real. Por exemplo, eu vou criar essa aplicação e a mesma vai consumir o WebService do cartola. Como corrigir isso ?

Service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Usuario } from '../model/usuario.model';
import { URL_API } from '../util/constantes';
import { Observable } from '../../../node_modules/rxjs';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type':'application/json'})
};

@Injectable()
export class UsuarioService {

  constructor(private http: HttpClient) { }

  public teste2(){
    return this.http.get('https://api.cartolafc.globo.com/mercado/status', httpOptions);
  }
}

Component:

// O botão no meu HTML chama esse método teste()
      public teste(): void{   
        this.serviceUsuario.teste2()
          .subscribe(
            (response) => {
              console.log("Sucesso");
              console.log(response);
            },
            err => {
              console.log("Erro");
              console.log(err);
            }
          )
      }
1
  • Aparentemente só está liberado a requisição para o próprio domínio cartolafc.globo.com Nesse caso sua aplicação deveria estar nesse domínio 26/07/2018 às 20:25

1 Resposta 1

2

Primeiramente, precisamos entender o que é o CORS.

Cross-origin resource sharing ou compartilhamento de recursos de origem cruzada é uma especificação de segurança de browsers que tem como intenção fazer a segurança de recursos de diferentes origens.

Fonte.

A responsabilidade da configuração desse mecanismo é do backend. Ele que deve dizer quais domínios a API deve barrar/liberar o acesso.

Nesse caso, não temos acesso ao backend para adicionar o milagroso:

Access-Control-Allow-Origin: *.

E agora, como proceder?

Como você mencionou, pode-se utilizar uma extensão no Chrome para desabilitar o CORS, que vai funcionar em um ambiente de desenvolvimento. O problema é quando cai em produção, já que não temos controle sobre o browser do cliente.

Uma opção pra burlar esse controle é utilizar um reverse proxy, que deve monitorar as suas requisições e injetar os headers de CORS a cada requisição.

Existem várias formas de montar esse proxy, uma delas é bem descrita nesse artigo, do qual retirei minha primeira citação.

Um serviço parecido com esse é o cors-anywhere, que já disponibiliza um URL pronta para ser utilizada.

A requisição fica assim:

this.http.get('https://cors-anywhere.herokuapp.com/https://api.cartolafc.globo.com/mercado/status').subscribe(r => {
  console.log(r);
}, err=> {
  console.log(err);
});

que retorna o objeto esperado:

inserir a descrição da imagem aqui

Funciona? Sim!

Deve ser usado?

Bom, na minha opinião, se o desenvolvedor da API negou esses acessos, é por algum motivo. Cabe a você decidir se o uso desse workaround é realmente necessário.

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 .