Problem with CORS in Angular 5

Question

Problem with CORS in Angular 5

Navigation

#1 by (1 votes)

1

Personal I'm having a test application in Angular 5 and I'm trying to consume the WebService from the top hat. When making this attempt the following error appears:

Failed to load link : The 'Access-Control-Allow-Origin' header has a value ' a href="https://cartolafc.globo.com"> link 'that is not equal to the supplied origin. Origin ' link ' is therefore not allowed access.

I know that for test questions I can simply disable this validation either via plugin or by another option. But in the case of an actual application. For example, I'm going to create this application and it will consume the WebService of the top hat. How do I fix this?

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

web-service cors angular

asked by anonymous 26.07.2018 / 21:47

1 answer

Laravel Image intervention does not save extension reverse connection in C #

score 1 · Answer 1

First, we need to understand what CORS is.

Cross-origin resource sharing or cross-source resource sharing is a security specification of browsers that are intended to secure resources from a variety of sources.

Font .

The responsibility of configuring this mechanism is the backend. It should tell you which domains the API should bar / release access to.

In this case, we do not have access to the backend to add the miracle:

Access-Control-Allow-Origin: * .

And now, how to proceed?

As you mentioned, you can use an extension in Chrome to disable CORS, which will work in a development environment. The problem is when it falls into production, since we have no control over the client browser.

One option to circumvent this control is to use a reverse proxy , which should monitor your requests and inject% CORS% with each request.

There are several ways to mount this proxy, one of which is well described in this article , from which I extracted my first quote.

A service similar to this is cors-anywhere , which already provides a ready-to-use URL.

The request looks like this:

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

which returns the expected object:

Does it work? Yes!

Should it be used?

Well, in my opinion, if the API developer denied these hits, it's for some reason. It's up to you to decide if the use of this workaround is really necessary.