使用授权标头进行 GET 时出错 - 仅在浏览器中（CF-RestApi 和 Angular）

Question

首先要做的事情： 我们在 ColdFusion 中开发自己的 RestAPI，具有以下标头：

cfheader (name="Access-Control-Allow-Origin", value="*");
cfheader (name="Access-Control-Allow-Headers", value="*");
cfheader (name="Access-Control-Allow-Methods", value="GET, POST, PUT, HEAD, OPTIONS");
cfheader (name="Access-Control-Allow-Credentials", value="true");

网络服务器允许所有标头和方法 - 我已经询问了我们的系统管理员。

我们正在编写一个 Angular(18) 应用程序（对 Angular 没有太多经验）。 我们使用拦截器来添加标头。

我们的登录在邮递员和浏览器中正常工作（发布，无身份验证标头..）！

成功登录后有两个 get-calls，这是我的理解问题：

a) 如果没有授权标头，请求将返回 200 ok，响应将如我们所愿（我们在 api 中排除所需的授权部分并返回内容）。 工作邮递员和浏览器！

b) 有了授权标头和有效的令牌，并且工作授权逻辑只是邮递员获得有效响应，浏览器就会在 OPTIONS 和 GET 请求中显示 500er CORS 错误。

我的问题： 为什么？ 我比较了工作获取和非工作获取调用的标头 - 几乎相同。

有人可以解释导致这种行为的原因吗？ 浏览器是否更严格地遵循 cors 规则？但为什么它在没有添加标头的情况下也能工作（我如何命名它并不重要！）？

这是我们的拦截器：

 if (req.headers.has('no-auth')) {
    req = req.clone({
      headers: req.headers.delete('no-auth', 'true'),
      setHeaders: { Accept: 'application/json' },
    });
    return next(req);
  } else {
    /* Token: */
    let Token = localStorage.getItem('Token')
      ? localStorage.getItem('Token')
      : '';
    const auth_headers = req.headers.set('Authorization', `${Token}`);

    // Clone the request and add the authorization header
    const authReq = req.clone({/*auth_headers*/});
    return next(authReq);
  }

...是的，拦截器尚未完成...

提前感谢您的帮助！ :-)

乌韦

编辑：

1. Angular 正在本地主机上运行
2. 我认为问题出在 OPTIONS-preflight 中的某个地方...所以这是目前的 API 标头：

// Handle CORS preflight request
if (cgi.request_method == "OPTIONS") {
    cfheader(name="Access-Control-Allow-Origin", value="http://localhost:4004");
    cfheader(name="Access-Control-Allow-Headers", value="Content-Type, Authorization");
    cfheader(name="Access-Control-Allow-Methods", value="GET, POST, PUT, DELETE, OPTIONS");
    cfheader(name="Access-Control-Allow-Credentials", value="true");
    cfheader(statuscode="200", statustext="OK");
    cfexit();
}

// Your actual API logic here
cfheader(name="Access-Control-Allow-Origin", value="*");
cfheader(name="Access-Control-Allow-Headers", value="*");
cfheader(name="Access-Control-Allow-Methods", value="GET, POST, PUT, DELETE, OPTIONS");
cfheader(name="Access-Control-Allow-Credentials", value="true");

Answer 1

您的开发环境需要一个代理。 看一下这个： https://v17.angular.io/guide/build#proxying-to-a-backend-server