从 AngularJS 前端到 Spring rest 后端的 CORS 问题

Posted 2023-03-04

【中文标题】从 AngularJS 前端到 Spring rest 后端的 CORS 问题

【英文标题】：CORS issue from AngularJS frontend to Spring rest backend

【发布时间】：2019-09-24 04:26:15

【问题描述】：

我有前端 AngularJS 应用程序和 spring rest 后端应用程序都部署在具有相同端口的同一个 tomcat 中，它们的上下文不同。我可以从 Postman 访问 spring rest 端点。但是由于 CORS 策略，我的前端无法访问后端。错误信息是

Access to XMLHttpRequest at 'http://sbr-devp-55:8080/BackendWS/administration/getLabels' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我尝试了以下方法：编写一个 CORSFilter 如下：

public class CORSFilter implements Filter 
@Override
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");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers,"
                        + " Authorization, X-Requested-With,startTime ");
    chain.doFilter(req, res);



public void init(FilterConfig filterConfig) 
    //initialization code


public void destroy() 
    //destroy code

我写了一个这样的初始化程序：

public class BackendWSInitializer extends AbstractAnnotationConfigDispatcherServletInitializer 

@Override
protected Class<?>[] getRootConfigClasses() 
    return new Class[]  BackendWSConfiguration.class ;


@Override
protected Class<?>[] getServletConfigClasses() 
    return null;


@Override
protected String[] getServletMappings() 
    return new String[]  "/" ;


@Override
protected Filter[] getServletFilters() 

    Filter [] singleton =  new CORSFilter(),new OpenEntityManagerInViewFilter();
    return singleton;

我还需要做什么？为什么起源是http://localhost:8080？不是http://sbr-devp-55:8080？我必须在 AngularJS 方面做些什么吗？奇怪的是，这在其他 2 台开发人员的机器上没有任何 CORS 问题。这可能是任何证书问题吗？错误消息不表示任何此类事情。

这是它在 F12 > 控制台中的显示方式：

    POST http://sbr-devp-55:8080/BackendWS/administration/getLabels 404 (Not Found)
localization.js:108 data: "", status: 404, headers: ƒ, config: …, statusText: "Not Found"
config: data: clientId: 92, projectId: 334, languageId: 1, userId: -1
headers: Content-Type: "application/json;", Accept: "application/json;", startTime: 1557157292135method: "POST"
paramSerializer: ƒ ngParamSerializer(params)timeout: 600000
transformRequest: [ƒ]transformResponse: [ƒ]
url: "http://SBR-DEVP-55:8080/BackendWS/administration/getLabels"
__proto__: Objectdata: ""headers: ƒ (name)status: 404statusText: "Not Found"__proto__: Object

【参考方案1】：

针对 XMLHTTP 请求报告了类似问题 Why does my javascript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?

你在使用 Angular

对于其他 2 位开发人员，检查通过的请求标头是什么并与您的比较？他们的任何代理是否在您的机器中定义？

【讨论】：

我的机器上没有代理。我正在使用 AngularJS，即 Angular 1.x.x。我的机器是 Windows 10。

尝试从 Command CLI 运行的方式。 chromium-browser --disable-web-security --user-data-dir="[some directory here]" 从浏览器的角度禁用 CORS 规则验证。因此，您可以隔离它是否特定于 xmlhttprequest（或）java 服务器端。如果它有效，那么它似乎是 Java 过滤器处理中的一个问题 Ref : ***.com/questions/35588699/… Ref 2 : ***.com/questions/3102819/…

我已经添加了 chrome 插件：Allow-Control-Allow-Origin:*，如果它有效，将会报告。还修改了 CORSFilter 以包含“Origin”标题。

在已经存在的 CORSFilter 中，我添加了“Origin”标头 - 正因为如此或出于任何原因，问题得到了解决。它如下所示： response.setHeader("Access-Control-Allow-Headers ", "Origin,Content-Type,accept Access-Control-Allow-Headers, Authorization, X-Requested-With,startTime ");