none
Azure Maps - CORS Policy RRS feed

  • 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.

    Thursday, April 25, 2019 8:04 PM

Answers

  • 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'
    ]
    });


    • Edited by JonLighthill Tuesday, April 30, 2019 5:57 PM
    • Marked as answer by JonLighthill Tuesday, April 30, 2019 5:57 PM
    Tuesday, April 30, 2019 5:54 PM

All replies

  • 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? 
    Thursday, April 25, 2019 11:36 PM
  • 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.

    Friday, April 26, 2019 1:34 PM
  • Exactly my problem LukaszAlpta. Trying to add my origin http://localhost:4200 to to the cors policy
    Friday, April 26, 2019 4:01 PM
  • 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': '*' } 
    });

    • Proposed as answer by Ricky_Brundritt Friday, April 26, 2019 6:36 PM
    • Unproposed as answer by JonLighthill Monday, April 29, 2019 3:57 PM
    Friday, April 26, 2019 6:36 PM
  • 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.


    Saturday, April 27, 2019 7:40 AM
  • 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


    Monday, April 29, 2019 10:30 AM
  • 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();

    • Proposed as answer by Ricky_Brundritt Monday, April 29, 2019 5:30 PM
    • Unproposed as answer by JonLighthill Monday, April 29, 2019 8:40 PM
    Monday, April 29, 2019 5:30 PM
  • 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.

    Monday, April 29, 2019 8:45 PM
  • 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.

    Tuesday, April 30, 2019 2:38 PM
  • 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'
    ]
    });


    • Edited by JonLighthill Tuesday, April 30, 2019 5:57 PM
    • Marked as answer by JonLighthill Tuesday, April 30, 2019 5:57 PM
    Tuesday, April 30, 2019 5:54 PM
  • The team has now added CORs headers to the OPTIONS endpoint for the GET services which should correct the original issue.
    Wednesday, May 22, 2019 9:13 PM