ActiveCollab：ActiveCollab API 响应中缺少 Access-Control-Allow-Headers答案

【问题标题】：ActiveCollab: missing Access-Control-Allow-Headers in ActiveCollab API responsesActiveCollab：ActiveCollab API 响应中缺少 Access-Control-Allow-Headers
【发布时间】：2020-03-28 08:47:33
【问题描述】：

我正在构建一个小型 JavaScript 应用程序以使用 API 列出来自 ActiveCollab 的任务，但我遇到了 CORS 问题。

出现此问题是因为 ActiveCollab API 响应未在响应中包含 Access-Control-Allow-Headers，请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight。

ActiveCollab 开发人员是否愿意将必要的标头添加到 API 响应中？

谢谢你，米格尔

【问题讨论】：

我在从第三方应用程序拨打电话时遇到了同样的问题。您找到解决此问题的方法了吗？
我使用 CORS 浏览器扩展 (addons.mozilla.org/en-GB/firefox/addon/cors-everywhere) 进行本地开发。
谢谢，米格尔。此扩展为本地开发节省了时间，但仍然存在关于何时开始生产的问题。你遇到过这种情况吗？
是的，对于生产，我们在 nginx 中设置了代理传递配置，它设置应用程序所需的正确标头，并且应用程序通过代理而不是直接连接到 ActiveCollab。

标签： activecollab

【解决方案1】：

回答我自己的问题。

对于本地开发，我使用了 CORS 浏览器扩展 (https://addons.mozilla.org/en-GB/firefox/addon/cors-everywhere) 来解决 CORS 缺少的标头问题。

在生产中，我们通过 nginx 为应用程序提供服务并设置代理通道以设置正确的标头。该应用使用代理 URL 而不是 ActiveCollab API URL。

在应用设置中：

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

在 nginx 站点设置中：

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;
}

【讨论】：