Azure Maps - CORS Policy

Question

Trying to hit the following endpoint to create a typeahead for an input on location and am getting blocked by CORS policy.

https://atlas.microsoft.com/search/address/json?api-version=1.0&subscription-key={{key}}&typeahead=true&query=palm&limit=5&countrySet=US

I have looked at the Azure Map resource in the azure portal but I do not see a section for CORS policy.

Please advise. I understand what CORS is and have added CORS to azure search service, but can not find it anywhere for Azure maps.

Answer 1

I'm not able to reproduce this. The REST service has CORs enabled on it. Can you provide the code block you are using to make the request? 

Answer 2

Hi, 

I am facing similar problem in an Angular App which makes call to the following URL:

https://atlas.microsoft.com/search/address/structured/json?subscription-key=XXX&api-version=1.0&countryCode=it&postalCode=95127

The Browser is making automatically an preflight Request with HTTP Method: Options

1. Request URL:
   https://atlas.microsoft.com/search/address/structured/json?subscription-key=XXX4&api-version=1.0&countryCode=it&postalCode=00012
2. Request Method:
   OPTIONS

And following Request Headers:

1. Access-Control-Request-Headers:
   request-id
2. Access-Control-Request-Method:
   GET
3. Origin:
   http://localhost:4800

This reques responds with 200 but the Response is missing the access-control-allow-origin header what I suspect to be the problem.

Answer 3

Exactly my problem LukaszAlpta. Trying to add my origin http://localhost:4200 to to the cors policy

Answer 4

Looks like the request from the client (angular) is not including the Access-Control-Allow-Origin header. Try the following:

$http.get('https://atlas.microsoft.com/search/address/structured/json?subscription-key=XXX4&api-version=1.0&countryCode=it&postalCode=00012', {
	headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } 
});

Answer 5

Thank you for your response but unfortunately I don't think so. 

According to CORS specification the header Access-Control-Allow-Origin': '*' is a response header and is always to be set by the server.

On the developer.mozilla.org/de/docs/Web/HTTP/CORS site there is more examples which explain how a cors request should be handled.

I don't think there should be something more to care about on the client side.

Answer 6

I provided a repo for reproduction of the problem on github. You just have to cause a preflight requst ( HTTP Method OPTIONS ) which is possible eg. with custom header in the request ( according to developer.mozilla.org/de/docs/Web/HTTP/CORS )

github com / lukasalphta/cors-atlas-api

Answer 7

Ok, see the issue. The Azure Maps REST services already have CORs enabled. However, Angular is requesting OPTIONS before making the request and that's causing the issue. This is also uncommon for a GET service request. To get around this issue, you have to make a simple GET request in Angular which means, simply removing the options from the request. I modified your code to the following and it worked fine:

this.httpClient
    .get('https://atlas.microsoft.com/search/address/structured/json?subscription-key='+ this.apiKey +'&api-version=1.0&countryCode=it&postalCode=00012')
    .subscribe();

Answer 8

That is the problem, that CORS is ENABLED. We need a way to allow specific origins to make requests.

I just tried your httpclient snippet and am still getting this in the chrome dev console.

Access to XMLHttpRequest at 'https://atlas.microsoft.com/search/address/structured/json?subscription-key={{subkey}}&api-version=1.0&countryCode=it&postalCode=00012' 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.

Answer 9

This is not the solution. It is not so uncommon to have some custom headers in the get request. We are using ApplicationInsisghts which appends Request-Id header for every request. So we can not remove it for just one request.

Edit:

Ok, I found a way to excude Atlas API in ApplicationInsights, so that Angular doesn't append the Request-Id header anymore and the OPTIONS request isn't called anymore and it works this way.

Answer 10

Can confirm, I commented out the application insights download and set up method and it is now working.

I was also able to get it working with the following by excluding correlating header on the microsoft.com domain

AppInsights.downloadAndSetup({

instrumentationKey: environment.appInsightsKey,

enableCorsCorrelation: true,

correlationHeaderExcludedDomains: [

'*.microsoft.com'

]

});

Answer 11

The team has now added CORs headers to the OPTIONS endpoint for the GET services which should correct the original issue.