CORS problem in a angular application

Apps / Services
1

Hi to everybody,
I’m getting an issue with CORS. I’m developing a webapp application (angular) in which I offer vegetation idexes maps. During the token retrivation with the folowing link ‘https://services.sentinel-hub.com/auth/realms/main/protocol/openid-connect/token’ I obtain status code 200, but with CORS exception.

How can I solve it? Thank you in advance

2

Hi Davide,

Please can you share some code relevant to your error so we can help you out?

3

Here the code I’m using to retrive the access token. This is a part of my angular class service with the following methods:

  • get_sentinel_token(): when I run this method I get status code 200 (POST request) but I cannot received the token for the CORS exception.
@Injectable({
  providedIn: "root",
})
export class SentinelHubService {
  //tokenUserLogued$ = new EventEmitter<string>();
  public readonly API = env.enviroments;

  constructor(
    private router: Router,
    public http: HttpClient,
    private communFunc: CommunfuncService,
    // public sweetA: SweetService
  ) {}

get_sentinel_token(){
  const authData = {
    grant_type:    this.API.sentinel.token_grant_type,
    client_id:     this.API.sentinel.token_client_id,
    client_secret: this.API.sentinel.token_client_secret,
  };
  const headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});
  const body = Object.keys(authData).map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(authData[key])).join('&');

  console.log('generando el token');
  console.log(body);
  return this.http.post<any>(this.API.sentinel.token_url, body, { headers: headers });
}
}
4

Dear Davide,

An OAuth client that is going to be used in a single page web app must have this option enabled; Client will be used by a single-page application (SPA) option needs to be checked and then allowed domains need to be set.

See the docs for more info.

1 Like
5

Thank you!

I updated the settings in “Update existing OAuth Client” window, I checked “Client will be used by a single-page application” and I added the used domain: “https://oliver.sigmaconsulting.it/”.

Again the service gives me CORS error, I can solve it installing a plugin on the browser (Google Chrome) that allow me to “Enable CORS”.

How can I make it work the webapp without that plugin?

6

Try using a wildcard (*) in the domain specification: https://oliver.sigmaconsulting.it*
If that doesn’t work, check allow all domains if that fixes the issue.

1 Like