Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Blocked by CORS policy

Olá. Ao acessar o recurso de listagem recebi a seguinte mensagem:

...has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

Como corrigir?

Obrigado.

4 respostas

Sidney, você pode me mandar um print com a requisição e o erro completo, por favor, pra eu entender melhor?

Olá Vinicius.

Realizei uma chamada pelo angular da seguinte maneira:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public medicos: Medico[];

  constructor(public navCtrl: NavController, private _http: HttpClient) {

    this._http.get('http://localhost:8080/medicos').subscribe(
      (medicos) => {
        this.medicos = medicos;
      }
    );

  }

}

Na console do navegador apareceu a seguinte mensagem:

v @ polyfills.js:2
core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ionic-lab:1 Tracking Prevention blocked access to storage for https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=1&_v=j87&tid=UA-44023830-9&cid=2065999545.1605445569&jid=812814532&gjid=1548350521&_gid=964280690.1606855790&_u=AACAAAAAAAAAAC~&z=1409166719.
?ionicplatform=android&http://localhost:8100/ionic-lab&http://localhost:8100/ionic-lab:1 Access to XMLHttpRequest at 'localhost:8080/medicos' from origin 'http://localhost:8100' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
core.es5.js:1020 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
defaultErrorLogger @ core.es5.js:1020
ErrorHandler.handleError @ core.es5.js:1080

Ah, maneiro, você tá usando Angular. Então, vou partir do princípio que você sabe o que é o problema de CORS, então pra você adicionar um cabeçalho na resposta usando Symfony é só passar um array associativo como terceiro parâmetro da classe Response.

Então basicamente, suas respostas teriam algo como:

new Response($json, 200, ['Access-Control-Allow-Origin' => 'seu-domínio-do-front');

Pra tornar esse trabalho mais fácil existem bundles (como se fossem módulos que você pode usar) como o NelmioCorsBundle.

Eu sugiro que você faça os 3 treinamentos de Symfony pra pegar melhor o jeito e depois integrar com o front em Angular. :-)

solução!

Otimo. Pesquisei sobre Nelmio, mas fiz igual vc falou e funcionou.

return new JsonResponse($listaMedicos, 
          Response::HTTP_OK, 
          array('Access-Control-Allow-Origin'=> '*'));

`

valeu.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software