nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

REST-API CORS issues

unknown

Dear Opsgenie-Community,

I'm currently implementing a web application in Angular to utilize the Opsgenie REST Api. The integration is already setup and it works when using Postman.

When I try to do a GET against the https://api.opsgenie.com/v2/alerts endpoint, my browser throws the dreaded CORS error:

Access to XMLHttpRequest at 'https://api.opsgenie.com/v2/alerts' from origin 'https://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I feel like I'm missing something but I can't seem to find any option to whitelist my localhost in Opsgenie or any option to enable to tell Opsgenie to reply to the preflight with an Access Control Allow Origin header. What am I missing here?

Regards

Accepted answers

unknown

As always, the issue was sitting in front of the screen.

I was able to add a proxy.conf.json to my project with the following configuration:

{    
 "/v2/*": 
{
        "target": "https://api.opsgenie.com",
        "logLevel": "debug",
        "changeOrigin":true    
 }
}

All comments

unknown

As always, the issue was sitting in front of the screen.

I was able to add a proxy.conf.json to my project with the following configuration:

{    
 "/v2/*": 
{
        "target": "https://api.opsgenie.com",
        "logLevel": "debug",
        "changeOrigin":true    
 }
}

Oleksandr Kovov

Hi Markus, community I'm having identical situation
have created proxy.conf.json in src folder:

{    
 "/v2/*": 
{
        "target": "https://api.eu.opsgenie.com",
        "logLevel": "debug",
        "changeOrigin":true    
 }
}

added configuration to angular.json as part of development configuration

              "browserTarget": "angular-example:build:production",
              "proxyConfig": "src/proxy.conf.json"

but still getting :

Access to XMLHttpRequest at 'https://api.eu.opsgenie.com/v2/alerts?query=status=open' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Maybe I missed something?
Node: 18.15.0
Angular 15.2.9
Angular CLI: 15.2.8
npm 9.5.0

Oleksandr Kovov

at least what i found is that to at least start proxy working in corresponding service.ts file I had to change original url to local

  getAlerts(){
    const headers = new HttpHeaders({Authorization:'GenieKey xxxxxxxxxx'});
    return this.http.get('v2/alerts?query=status=open', {headers: headers, responseType: 'json'}); 
    }

and now I'm getting:

localhost:4200/v2/alerts?query=status=open 504 (Gateway Timeout)

Oleksandr Kovov

(Gateway Timeout)

issue solved as I was in VPN behind proxy

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

opsgenie