Cross origin http request CORS fails with response header missing 'Access-Control-Allow-Credentials: true'

Cross origin http request (CORS) to Azure function does not return ‘Access-Control-Allow-Credentials:true’. Is there a way to add custom headers?

Details

• It is a nodeJS function
• Only one CORS entry: ‘http://localhost’
• Tried with both AJAX and Javascript API
• Authentication with google OAUTH

Error: Response to preflight request doesn’t pass access control check: Credentials flag is ‘true’, but the ‘Access-Control-Allow-Credentials’ header is ‘’. It must be ‘true’ to allow credentials. Origin ‘http://localhost’ is therefore not allowed access.

Mostly followed as per the following post except mine is CORS: https://shellmonger.com/2016/02/12/using-azure-app-service-authentication-with-a-web-application/

Code

    let options = {
        mode :'cors',  //tried both with and without
        method: 'GET',
        credentials: 'include',
        cache: 'no-cache'
    };
    fetch('https://<function-name>.azurewebsites.net/.auth/me.', options).then((response) => {
        this.logger.debug('[checkauth-callback-1]: Response = ', response);
        if (!response.ok && response.status !== 401)
            throw new Error('Invalid Response from Config Endpoint', response);
        if (response.status === 401)
            return false;
        return response.json();
    })

**also tried:**
 headers:new Headers({
        'content-type': 'application/json',
        'Accept': 'application/json',
        'Access-Control-Allow-Credentials':true,
        'Access-Control-Allow-Origin':true
'''


A similar issue raised on stackoverflow:
http://stackoverflow.com/questions/39215513/how-to-add-customer-http-header-in-response-from-azure-function

[satjinder]

I have finally managed to get around the issue. The trick is to remove all the CORS entries from Azure Functions app and handle it directly in your code. Thanks to the tip shared in post regarding azure app service.

module.exports = function(context, req) { context.log('Node.js HTTP trigger function processed a request. RequestUri=%s', req.originalUrl); f (req.query.name || (req.body && req.body.name)) { context.res = { // status: 200, /* Defaults to 200 */ body: {name: (req.query.name || req.body.name) } }; } else { context.res = { status: 400, body: "Please pass a name on the query string or in the request body" }; } context.res.headers = { 'Access-Control-Allow-Credentials' : 'true', 'Access-Control-Allow-Origin' : 'http://localhost', 'Access-Control-Allow-Origins' : 'http://localhost', 'Content-Type': 'application/json' }; context.done(); };

And from client side javascript:

` var request = new Request(url, { method: ‘GET’, credentials: ‘include’, cache: ‘no-cache’, mode:‘cors’ });

fetch(request) .then(function(response) { console.log(response); response.json().then(function(data){ console.log(data); alert(data) }); }) .catch(function(err){ console.log(err); }) ;`

I close this issue for now, but it will be great if we can specify additional headers at the application level.

[securityvoid]

@ricklove Can you please clarify what you did?

This is my code:

module.exports = function(context, req){
    var shared = require('../auth-shared-libraries');
    var cors_url = "https://mywebsite.azurewebsites.net"
    context.res =  {
        status: 200,
        headers: {
            "Access-Control-Allow-Credentials" : "true",
            "Access-Control-Allow-Origin" : cors_url,
            "Content-Type" : "application/json"
        },
        body : { "status" : "alive"}
    }
    context.done();
}

When I clear all URLS from API -> CORS in the Azure Portal the “Access-Control-Allow-Credentials” header works properly and is set to true, but “Access-Control-Allow-Origin” is not passed through and therefore is not set.

When I set API -> CORS in the Azure Portal to my domain name, that header is set properly, but Access-Control-Allow-Credentials is not set.