Cross-Origin Request Blocked Microsoft Azure Function

Question

When trying to call a remote Azure function from my client side, I get this error (URL censored):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://x.x.com (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

For testing purposes I have set CORS allowed origins in the portal to * as shown below:

This is my client side code:

$.get({
    url: "https://x.x.com",
    crossDomain: true,
    data: {
        weight: weight,
        height: height
    },
    success: function (data) {
        console.log(data);
        alert(data);
    },
    error: function(xhr) {
        console.log("Error");
    }
    });

Could anyone point me in the right direction? Many thanks.

try using a proxy to see if your problem is solved. Just change your url this way: http://cors-proxy.htmldriven.com/?url={your_url} (just replace the brackets with your url) and lets see what happens — David, Jan 29 '18 at 14:37
Which type of Azure resource are you attempting to access? Some allow you to enable CORS through the Portal. — Rory McCrossan, Jan 29 '18 at 14:37
I tried that David, it seems to work OK except I am not seeing any output like I would when I access it directly. Rory, I am just trying to access an Azure Function App from my client side, I have enabled CORS in the portal as per my original post. — Charlie Niekirk, Jan 29 '18 at 14:40
have you tried changing browsers? I have noticed that for example Edge tends to somehow cache CORS responses... — Thomas, Jan 29 '18 at 15:09
I just tried recreating the function again but the problem persists... — Charlie Niekirk, Jan 29 '18 at 15:20
What is the authentication level on your Function, and have you included the `x-functions-key` if necessary? I know it seems unrelated but I've seen this error in the console when the issue is not, in fact, CORS. — Ste Griffiths, Jan 29 '18 at 16:28

score 2 · Answer 1 · answered Jan 20 '19 at 10:38

As of January 2019 @Founder's answer didn't work for me - Azure strips out any CORS headers I try to add manually in code. I had to add the desired origins using the CORS settings module. I could see that the Op made reference to this module in his question, but it took me a while to find where it was located. Eventually found it at Function Apps, click your Function app name, go to Platform features tab, then CORS under API over the right-hand side. Not sure why it didn't work for Op, but adding my origins in here worked for me when adding in code would not.

I did read somewhere that disabling this setting will allow manual adding of CORS headers in code to work, but the setting is enabled by default and I couldn't see any way to disable it (it had 3 Azure domains in there by default, perhaps removing those would disable it...)

In case anyone else comes across this. You can remove the origins its showing and add *. Will allow full access, I would suggest remove this once your development is done. — littlevahn, Apr 15 '20 at 16:56

score 1 · Accepted Answer · answered Jan 30 '18 at 04:49

I had to add the origin on the response to get it to work.

When I'm returning the response I call

return Response.CreateResponse(req, HttpStatusCode.OK, result);


public static HttpResponseMessage CreateResponse<T>(HttpRequestMessage req, HttpStatusCode statusCode, T result)
    {
        var response = req.CreateResponse(statusCode, result);
        if (req.Headers.Contains("Origin"))
        {
            var origin = req.Headers.GetValues("Origin").FirstOrDefault();
            response.Headers.Add("Access-Control-Allow-Credentials", "true");
            response.Headers.Add("Access-Control-Allow-Origin", origin);
            response.Headers.Add("Access-Control-Allow-Methods", req.Method +  ", OPTIONS");
        }
        return response;
    }

Cross-Origin Request Blocked Microsoft Azure Function

2 Answers2

Linked