Angular 调用 Java 服务时出现 CORS 错误

Question

我有一个 Angular 应用程序，它在单独的容器中调用 Spring 启动 Java 服务。此网关服务根据需要调用另外两项服务（一项 Java 和一项 Python）。在本地运行四个 Docker 容器一切正常。当我在 AWS ECS 中运行执行此操作时，我的浏览器出现以下两个错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=. (Reason: CORS request did not succeed). Status code: (null).

ERROR Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=: 0 Unknown Error", error: error } error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … } headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) } message: "Http failure response for http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=: 0 Unknown Error" name: "HttpErrorResponse" ok: false status: 0 statusText: "Unknown Error" url: "http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword="

我在两个 java 服务中都有一个过滤器，如下所示：

@Component public class CORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}
}

在本地运行ning 时，页面加载并且我验证了我在网关服务响应上看到了预期的 CORS header：

HTTP/1.1 200
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, DELETE, PATCH
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: Origin,
X-Requested-With, Content-Type, Accept
Content-Type: application/json
Transfer-Encoding: chunked
Date: Sun, 30 Jan 2022 03:37:36 GMT
Keep-Alive: timeout=60
Connection: keep-alive

如果有帮助，我的 Python 服务也 returns 一个类似的 CORS header。我正在使用以下代码在我的 Python 脚本中启用 CORS。

app = Flask(__name__)  CORS(app)

这是对网关服务的 Angular 调用之一：

let resp = this.http.get(API_GATEWAY + "?page=" + page + "&keyword=" + keyword);

我尝试在 Angular 中配置代理，但这并没有解决问题。我还在 Java 中由每个 REST 控制器实现了 @CrossOrigin("*") 但无济于事。

有什么想法吗？

Answer 1

有两种方法可以解决这个问题：首先，您可能需要在扩展 WebSecurityConfigurerAdapter:

的 class 的配置方法中禁用 cors 和 csrf

 @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors()
                .and()
                .csrf()
                .disable()
                 .....

其次，您可以启用它：

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http    
                .cors()
                .and()
                .csrf()
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
                ....

Angular 调用 Java 服务时出现 CORS 错误

CORS error with Angular call to Java service

java

angular

cors