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

Question

我有一个 Angular 应用程序，它在单独的容器中调用 Spring Boot 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() {}
}

在本地运行时，页面会加载，并且我验证了我在网关服务响应上看到了预期的 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 服务也会返回类似的 CORS header 。我使用以下代码在 Python 脚本中启用 CORS。

app = Flask(__name__)  CORS(app)

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

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

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

有什么想法吗？

Answer 1

有两种方法可以解决这个问题: 首先，您可能需要在扩展 WebSecurityConfigurerAdapter 的类的 config 方法中禁用 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())
                ....