ActiveCollab: missing Access-Control-Allow-Headers in ActiveCollab API responses

Question

I am building a small JavaScript app to list tasks from ActiveCollab using the API, but I am getting into CORS issues.

The issue is occurring because the ActiveCollab API response does not include an Access-Control-Allow-Headers in the response, see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight.

Would the ActiveCollab developers be willing to add the necessary headers to the API response?

Thank you, Miguel

I am facing the same issue while making call from third party application. Have you found a solution for this issue ? — Architkumar Patel, Jul 15 '20 at 13:23
I used a CORS browser extension (https://addons.mozilla.org/en-GB/firefox/addon/cors-everywhere/) for local development. — Miguel Vieira, Jul 20 '20 at 12:57
Thanks, Miguel. This extension saves day for local development but still, there is an issue regarding when I move to production. Have you ever come across this kind scenario? — Architkumar Patel, Jul 23 '20 at 10:03
Yes, for production we set up a proxy pass configuration in nginx, that sets the correct headers needed by application, and the application connects via the proxy rather than directly to ActiveCollab. — Miguel Vieira, Jul 24 '20 at 14:29

score 1 · Answer 1 · answered Jul 24 '20 at 14:39

Answering my own question.

For local development I used a CORS browser extension (https://addons.mozilla.org/en-GB/firefox/addon/cors-everywhere) to work around the CORS missing headers.

In production, we serve the app via nginx and set up a proxy pass to set the correct headers. The app uses the proxy URL rather than the ActiveCollab API URL.

In the app settings:

VUE_APP_AC_API_URL = '<SERVER_URL>/ac-forwarder/<ACTIVECOLLAB_ACCOUNT>/api/v1'

In the nginx site settings:

location /ac-forwarder/ {
    proxy_pass https://app.activecollab.com/;

     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '<SERVER_URL>';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,X-Angie-AuthApiToken';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }

    if ($request_method = 'GET') {
        #add_header 'Access-Control-Allow-Origin' '<SERVER_URL>';
        add_header 'Access-Control-Allow-Methods' 'GET';
        add_header 'Access-Control-Allow-Headers'
            'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,X-Angie-AuthApiToken';
        add_header 'Access-Control-Expose-Headers'
            'Content-Length,Content-Range';
    }
}

location /app {
    alias /path/to/the/built/app;
}

ActiveCollab: missing Access-Control-Allow-Headers in ActiveCollab API responses

1 Answers1