为何设置Access-Control-Allow-Origin为通配符时CORS仍拒绝带凭证请求？

你遇到的报错是CORS安全规范的硬性限制导致的：当跨域请求携带凭证（你的Angular代码中设置了withCredentials: true，会自动携带Cookie、HTTP认证信息等凭证）时，响应头Access-Control-Allow-Origin不允许使用通配符*，必须明确指定和请求头Origin完全匹配的域名。你当前Nginx配置同时返回了Access-Control-Allow-Origin: *和Access-Control-Allow-Credentials: true，不符合规范，所以被浏览器拦截。

修改rest-api.mylocal.com对应的Nginx配置，替换通配符Origin配置，同时补充预检请求处理逻辑，示例如下：

server {
    listen 8080;
    listen [::]:8080;
    server_name rest-api.mylocal.com rest-api;

    location /foo {
        # 替换通配符，明确指定允许的跨域源
        add_header 'Access-Control-Allow-Origin' 'http://web-ui.mylocal.com' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        
        # 处理OPTIONS预检请求，直接返回204无内容，减少不必要的处理逻辑
        if ($request_method = OPTIONS) {
            return 204;
        }

        return 200 '{"status": "OK"}';
    }
}

如果后续需要支持多个跨域源访问接口，可以用动态匹配Origin的方式配置，避免硬编码多个域名：

location /foo {
    # 匹配合法的跨域源，可按自己的业务需求调整正则规则
    if ($http_origin ~* "^http://(web-ui.mylocal.com|其他允许的域名1|其他允许的域名2)$") {
        add_header 'Access-Control-Allow-Origin' $http_origin always;
    }
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    
    if ($request_method = OPTIONS) {
        return 204;
    }
    return 200 '{"status": "OK"}';
}

修改Nginx配置重载后，清理浏览器缓存重新发起请求，检查响应头的Access-Control-Allow-Origin值是否为http://web-ui.mylocal.com，不再是通配符即可。

内容的提问来源于stack exchange，提问作者DrTeeth