Authorized Firebase request to Cloud Functions HTTP return preflight request does not pass control check (No Access-Control-Allow-Origin)

Question

I am trying to send authorized Firebase requests to HTTP Cloud Functions following the official documentation .

However, I keep getting the error message:

Access to XMLHttpRequest at '[CLOUD-FUNCTION-SOURCE-URL]' from origin ' http://127.0.0.1:8080 ' 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.

I tried the following:

def cors_enabled_function_auth(request):
    # For more information about CORS and CORS preflight requests, see
    # https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
    # for more information.

    # Set CORS headers for preflight requests
    if request.method == 'OPTIONS':
        # Allows POST requests from origin * Authorization header
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST',
            'Access-Control-Allow-Headers': ['Authorization', 'Content-Type'] ,
            'Access-Control-Max-Age': '3600',
            'Access-Control-Allow-Credentials': 'true'
        }
        return ('', 204, headers)

    # Set CORS headers for main requests
    headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': 'true'
    }

    print('core logic here')

    return ('Hello World!', 200, headers)

On the front (using AngularJS) I make a request as follows:

self.getDownloadUrl = function(gcs_reference) {
        var url = '[CLOUD-FUNCTION-URL]';
        var params = {'param1': 'hello'};
        var headers = {
            'Content-Type': 'application/json'
        }
        return firebase.auth().onAuthStateChanged().then(
            function (user) {
                headers['Authorization'] = user['refreshToken']
                return postRequestHTTP(params, url, headers)
            },
            function (error) {
                console.log('error', error)
                return error;
            }
        )

    };


function postRequestHTTP(params, url, headers) {
        // Generic HTTP post request to an url with parameters
        var q = $q.defer();
        var body = params;
        var req = {
            headers: headers
        };
        $http.post(url, body, req).then(
            function(response) {
                q.resolve(response)
            }, function(error) {
                q.reject(error)
            }
        );
        return q.promise;
    }

Does anyone know what is the cause of this heresy?

Answer 1

I can't reproduce this. With your function and a request like:

function reqListener () {
  console.log(this.responseText);
}

xhr = new XMLHttpRequest();
xhr.open('POST', "[CLOUD-FUNCTION-URL]");
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.addEventListener("load", reqListener);
xhr.send('test');

I get a successful request. Perhaps the latest version of your function is not actually deployed, or your frontend is pointing at a different endpoint?