angular 和 spring boot 应用程序中的 CORS 错误

Question

我在 spring boot/maven 中有一个后端，在 Angular 15 中有一个前端，两者都托管在不同的域中。使用通配符作为 CORS 可行，但这不是我需要的。

这个 spring boot 代码应该将

Access-Control-Allow-Origin

标头设置为“https://example.web.app”（没有尾部斜杠）。

@Component
public class JWTAuthorizationFilter extends OncePerRequestFilter {
    @Value("${custom.data.cors}")
    private String cors_value;
    @Override
    protected void doFilterInternal(HttpServletRequest request,
                                    HttpServletResponse response,
                                    FilterChain filterChain) throws ServletException, IOException {


        String originHeader = request.getHeader("Origin");
        if (cors_value.equals("*") || originHeader != null && originHeader.equals("https://example.web.app")) {
            response.setHeader("Access-Control-Allow-Origin", "https://example.web.app");
            response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "X-PINGOTHER,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization");
            response.addHeader("Access-Control-Expose-Headers", "xsrf-token");
        }
[...]
}

然而，当我使用该原始标头发出邮递员请求时，我收到了 cors 错误。当我添加尾部斜杠时，api 会按预期工作。所以“https://example.web.app/”有效而“https://example.web.app”无效。

使用尾部斜杠时的响应头是：

Access-Control-Allow-Origin: https://example.web.app/
access-control-allow-headers: X-PINGOTHER,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization
access-control-expose-headers: xsrf-token
[...]

我的角度应用程序托管在“https://example.web.app”并具有不同的路由，如/home、/about 等。当尝试从应用程序访问 api 时，请求标头是：

GET
    https://mybackend.com/myresource
Status
403
Forbidden
VersionHTTP/3
Transferred861 B (44 B size)
Referrer Policystrict-origin-when-cross-origin
    GET /myresource HTTP/3
    Host: mybackend.com
    User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0
    Accept: application/json, text/plain, */*
    Accept-Language: en-US,en;q=0.5
    Accept-Encoding: gzip, deflate, br
    Origin: https://example.web.app
    DNT: 1
    Connection: keep-alive
    Referer: https://example.web.app/
    Sec-Fetch-Dest: empty
    Sec-Fetch-Mode: cors
    Sec-Fetch-Site: cross-site
    Sec-GPC: 1

这就是为什么我需要让 Access-Control-Allow-Origin 接受没有尾部斜线的主机。

我在进行 api 调用时尝试使用角度设置原始标头（即使我知道不推荐这样做并且只有浏览器或代理必须这样做）：

return this.http.get<any>(
    this.uri,
    {
        headers: {
            'Origin':'https://example.web.app/'
        },
        observe: 'response',
        responseType: 'json'
    }
);

但是有些东西阻止了它：

Attempt to set a forbidden header was denied: Origin