Fetch API cannot load https://dc.services.visualstudio.com/v2/track. Request header field content-encoding is not allowed by Access-Control-Allow-Headers in preflight response.

[anatoli-iliev]

I am trying to integrate npm's application insights module (https://www.npmjs.com/package/applicationinsights) into my React js application.

My source for doing this is:

import appInsights from 'applicationinsights';
appInsights.setup(applicationInsightsKey).start();

The problem I got is that in my Chrome Developer tools I can see a preflight request made to https://dc.services.visualstudio.com/v2/track. But in the console I can see the following error:

"Fetch API cannot load https://dc.services.visualstudio.com/v2/track. Request header field content-encoding is not allowed by Access-Control-Allow-Headers in preflight response."

Do you have an idea how can I fix this issue?

[SergeyKanzhelev]

dup of #52
What do you see in the fiddler?

[anatoli-iliev]

I can see a call to https://dc.services.visualstudio.com/v2/track with HTTP verb OPTIONS which has a response HTTP 200 - OK.

[SergeyKanzhelev]

does the response has headers allowing cross origin calls? Can you please copy all headers?

[anatoli-iliev]

I will be able to copy all the headers tomorrow as I am not in front of my development machine, but what I noticed is response headers DON'T allow content-encoding, while the request IS sending content-encoding header.

[SergeyKanzhelev]

@tolsan do you have an update?

@KamilSzostak @OsvaldoRosado did you see this issue before? Does it repro for you?

[anatoli-iliev]

@SergeyKanzhelev I switched to https://github.com/Microsoft/ApplicationInsights-JS and it works good for me.