Getting CORS Issue when Connecting to Java FN from Angular UI

Question

I am currently trying to resolve a CORS issue that we are having when we query a database using a FN project function that is called from Angular. The FN function is written in Java (fnproject/fn-java-fdk:1.0.83), and the UI is in Angular 7. Essentially, we send a JSON query to the FN function as a byte array, which processes the JSON query into the appropriate query, and then sends it to the database. The database responds with the result of the query, which passes back through the FN function to the UI with the appropriate response.

I tried putting the CORS headers as htxc.setResponseHeader() and htxc.addResponseHeader(). I have also tried changing the func.yaml to include the CORS protocols there as opposed to inside the function, but this does not work. In addition, I tried changing the "*" in the Access-Control-Allow-Origin header to a specific URL that we were making the request from as well. We have also looked at adding many different headers to Access-Control-Allow-Headers in the hope that one of them would resolve the issue.

import com.fnproject.fn.api.httpgateway.HTTPGatewayContext;
...

public class query_database {

    /**
     * @param input is a byte[] array with input, contains the request information
     * @return List<dbObject> A list of DB Objects
     */
    public List<dbObject> query(byte[] input, HTTPGatewayContext htxc){


        // Takes care of the HTTP Gateway context
        htxc.setResponseHeader("Access-Control-Allow-Origin", "*");
        htxc.addResponseHeader("Access-Control-Allow-Methods", "POST, GET");
        htxc.addResponseHeader("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept, Content-Length, X-Experience-API-Version, X-Prototype-Version, Token, X-Auth-Token");
        htxc.addResponseHeader("Access-Control-Allow-Credentials", "true");

        if (htxc.getMethod().equals("OPTIONS")) {
            return Collections.emptyList();
        }

        String str = new String(input);
        JSONObject json = new JSONObject(str);;

        Request request = new Request();
        String system = json.getString("system");
        request.setSystem(system);

        queryFunc queryFunc = new queryFunc();

        try {

            return queryFunc.makeQuery(request);

        } catch(DBConnection | HttpException |IOException | emptyStringException e) {

            return Collections.emptyList();

        }
    }
}

In the Angular 7 UI that we are making, the following error appears when we open it in Chrome/Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://server.com:8080/t/function/function-trigger. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).  (unknown)

This is despite the 'Access-Control-Allow-Origin' response header being set in the Java code. The function works properly other than this CORS error, so we are fairly confident that it is something with the headers. For instance, the JSON response is correct.

Any thoughts? There could potentially be something wrong with the current header approach, or perhaps it could be on the Angular side as well. Let me know if there is any need for clarification on the question as well.