I need to make a proxy enpoint for "Application Insights for web pages" telemetry calls (Azure Function Proxy fails CORS Options call)

Question

I have an html app with Application Insights for web pages and Azure Function api. Application Insights is sending telemtry via calls to https://dc.services.visualstudio.com/v2/track . I'd like this trafic to go through one of the following urls:

a url on my API (i.e. my-app.azurewebsites.net/telemetry)
a url on additional API I'd make (i.e. my-app-telemetry.azurewebsites.net/telemetry)
some way to add a custom url endpoint to my Application Insights on Azure?

Essentially, I need to make a proxy endpoint in my API. I tried Azure Function Proxies, but no luck so far, I'm getting HTTP code 400 - Bad request.

Update, the Azure Function Proxy I tried looks like this:

{
    "$schema": "http://json.schemastore.org/proxies",
    "proxies": {
        "Application insights": {
            "matchCondition": {
                "route": "telemetry",
                "methods": [
                    "GET",
                    "POST",
                    "OPTIONS"
                ]
            },
            "backendUri": "https://dc.services.visualstudio.com/v2/track",
            "responseOverrides": {
                "response.headers.Access-Control-Allow-Origin": "*"
            }
        }
    }
}

Update

@naile provided a solution. Azure Function Proxies by default do not proxy CORS calls. You should navigate to "Platform Features" => "CORS" and remove everything you see there (see screenshot in accepted answer).

By default it contains

"https://functions.azure.com",  
"https://functions-staging.azure.com",  
"https://functions-next.azure.com"

Remove those and Azure Function Proxy should now forward CORS calls also.

In you Azure Function template, it should look like this

"cors": {
    "allowedOrigins": [], //this should be empty array
    "supportCredentials": false
}

May I ask for what purpose? Then I can probably give a better answer — Peter Bons
@Peter Bons I'm in a situation where I can use Application Insights, but I should avoid calls to 3-rd party urls from the browser. — Ivan Koshelev

naile naile · Accepted Answer · 2020-02-26T21:55:57

I had exactly this problem recently. Turns out OPTIONS requests are not proxied with the default azure function CORS setup. The 400 you are seeing comes from the azure function not allowing your origin.

Simple fix: remove all entries under CORS settings and you're allowed to proxy OPTIONS requests.

I need to make a proxy enpoint for "Application Insights for web pages" telemetry calls (Azure Function Proxy fails CORS Options call)

1 Answers