CODEWITHSUNDEEP
javascriptazurebrowsercors
Krzysztof M
Krzysztof M

Reputation: 11

Azure API Management - CORS issue

Providing the following CORS policy at the topmost scope of the Azure API Management:

<policies>
        <inbound>
            <cors>
                <allowed-origins>
                    <origin>*</origin>
                </allowed-origins>
                <allowed-methods>
                    <method>*</method>
                </allowed-methods>
                <allowed-headers>
                    <header>*</header>
                </allowed-headers>
                <expose-headers>
                    <header>*</header>
                </expose-headers>
            </cors>
        </inbound>
        <backend>
            <forward-request />
        </backend>
        <outbound />
    </policies>

When using:

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://mydomain.azure-api.net/calc/add?a=5&b=5');                 
    xhr.send();

Raw request:

    GET https://mydomain.azure-api.net/calc/add?a=5&b=5 HTTP/1.1
    Host: mydomain.azure-api.net
    Connection: keep-alive
    Origin: https://any.com
    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
    Accept: */*
    Referer: https://any.com/
    Accept-Encoding: gzip, deflate, sdch, br
    Accept-Language: en-US,en;q=0.8,de;q=0.6,pl;q=0.4

I am receiving error message:

XMLHttpRequest cannot load https://mydomain.azure-api.net/calc/add?a=5&b=5. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://any.com' is therefore not allowed access. The response had HTTP status code 401.

Raw response:

    HTTP/1.1 401 Access Denied
    Content-Length: 152
    Content-Type: application/json
    WWW-Authenticate: AzureApiManagementKey realm="https://mydomain.azure-api.net/calc",name="Ocp-Apim-Subscription-Key",type="header"
    Date: Fri, 04 Nov 2016 09:31:15 GMT

    { "statusCode": 401, "message": "Access denied due to missing subscription key. Make sure to include subscription key when making requests to an API." }

As soon as I use correct api key:

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://mydomain.azure-api.net/calc/add?a=5&b=5');     
    xhr.setRequestHeader('Ocp-Apim-Subscription-Key', '**********************');
    xhr.send();

Raw request:

    GET https://mydomain.azure-api.net/calc/add?a=5&b=5 HTTP/1.1
    Host: mydomain.azure-api.net
    Connection: keep-alive
    Origin: https://any.com
    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
    Ocp-Apim-Subscription-Key: **********************
    Accept: */*
    Referer: https://any.com/
    Accept-Encoding: gzip, deflate, sdch, br
    Accept-Language: en-US,en;q=0.8,de;q=0.6,pl;q=0.4

I am receiving success message.

Raw response:

    HTTP/1.1 200 OK
    Cache-Control: no-cache
    Pragma: no-cache
    Content-Length: 123
    Content-Type: application/xml; charset=utf-8
    Expires: -1
    X-AspNet-Version: 4.0.30319
    X-Powered-By: ASP.NET
    Access-Control-Allow-Origin: *
    Access-Control-Expose-Headers: Content-Length,Date,Server,X-AspNet-Version,X-Powered-By
    Date: Fri, 04 Nov 2016 09:34:44 GMT

    <result><value>10</value><broughtToYouBy>Azure API Management - http://azure.microsoft.com/apim/ </broughtToYouBy></result>

Question:

It does look to me like CORS issue happens only when incorrect/no API key is provided, is this expected behaviour from Azure API Management?

Upvotes: 1

Views: 2031

Answers (2)

Indu Aravind
Indu Aravind

Reputation: 51

This has happened with different instance as well. I was trying to access a wrong endpoint and still received the same CORS issue on the browser. When I tried the same call through Postman it gave me the Resource not found exception. Resource not found/Invalid JWT/JWT Validation failed all gave CORS error in the console.logs. It does give the unauthorized error correctly or 500 Internal error correctly. I verify the actual response on the Postman and attempt to fix it after that.

Upvotes: 0

Martyn C
Martyn C

Reputation: 1139

In short yes, I'm not sure it's the correct error message that is displayed however the API Management solution is based on subscription IDs and keys just like a normal API so I wouldn't expect it to work when your not passing the required information through.

Upvotes: 0

Related Questions