CORS issue

Having trouble with CORS.

Investigative information

Please provide the following:

• Timestamp: 2:14PM November 14th 2018
• Function App name: recommender-test-4
• Function name(s) (as appropriate): GetRecommendations

Repro steps

Provide the steps required to reproduce the problem:

1. Deployed this app.

• Returns json as expected: https://recommender-test-4.azurewebsites.net/api/GetRecommendations?code=GHvuTHyv5jd5EsTK44lwQgwTQEwk2PbI6zkS7rugaVVjM7dInG4SQA==

1. Want to access from another app:

axios.get(`https://recommender-test-4.azurewebsites.net/api/GetRecommendations?code=GHvuTHyv5jd5EsTK44lwQgwTQEwk2PbI6zkS7rugaVVjM7dInG4SQA==`)
            .then(res => {
                const data = res.data.data.children.map(obj => obj.data);
                console.log(`Response Data: ${data}` );
            }).catch((err, res) => {
                console.log(err);
            });

1. Cors error:

2. Add * cors rule:

Expected behavior

At this point I would expect to see the error disappear.

Actual behavior

Request is going through, but error remains. So I can’t actually get the body out of the response.

Known workarounds

Apparently there is a way to add some headers directly to func.HttpResponse to make this work? But I can’t figure it out…

I could do something like this in JavaScript?

module.exports = function (context, req) {
    context.res = {
        status: 200,
        body: "Hello " + req.query.name,
        headers: {
            'Content-Type': 'text/plain',
            'Access-Control-Allow-Origin': 'True'
        }
    };
    context.done();
}

[asavaritayal]

Here’s the API reference for azure.functions.HttpResponse - https://docs.microsoft.com/en-us/python/api/azure-functions/azure.functions.httpresponse?view=azure-python

You can provide a dict for the headers field.

Here’s an example:

headers  = {"Ocp-Apim-Subscription-Key": subscription_key,
                "Content-Type": "application/octet-stream"}
response = func.HttpResponse(headers=headers)
return response

[bowdenk7]

Awesome thanks. Tacking on the below headers worked for me.

headers  = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "Get, Post, Options"
}

This will work fine for the demo, but it feels like this is redundant with setting CORS policies in portal.