从 Angular Js（Java Web）调用 API 时出现 CORS 错误

Posted 2023-03-04

【中文标题】从 Angular Js（Java Web）调用 API 时出现 CORS 错误

【英文标题】：CORS error while API calling from Angular Js (Java web)

【发布时间】：2017-06-03 16:08:55

【问题描述】：

从 Angular Js 调用 API 时出现错误，

XMLHttpRequest cannot load http://10.10.14.54:8080/FcmBackend_ws/rest/devices. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

我在从 Web 浏览器和 Postman 调用 API 时得到 JSON 结果。

【问题讨论】：

您可以通过两种方式解决此问题：1. 设置代理服务器或 2. 在您的 Web 应用程序中启用 cors。

【参考方案1】：

您必须在您的 API 中允许源访问，首先您必须定义一个配置允许的源和方法的方法：

private void setCrossAccessHeaderResponse(HttpServletResponse servletResponse) 
        servletResponse.setHeader("Access-Control-Allow-Origin", "*"); // Allows all origins
        servletResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
        servletResponse.setHeader("Access-Control-Max-Age", "3600");
        servletResponse.setHeader("Access-Control-Methods", "POST, PUT, OPTIONS, GET, DELETE"); // Define the HTTP verbs allowed
    

然后你可以从 doFilter() 方法中调用它：

@Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException 
        //We cast the request and response objects
        HttpServletRequest servletRequest = (HttpServletRequest) request;
        HttpServletResponse servletResponse = (HttpServletResponse) response;
        //We set the cross header in response
        setCrossAccessHeaderResponse(servletResponse); // Here we call the method
        boolean isAnRequestBrowser = OPTIONS_METHOD.equals(servletRequest.getMethod());
        if (isAnRequestBrowser) 
            //Do something
         else 
           // Reject
        
    

如果您使用的是 Spring，请不要忘记添加 @Component 注释。

希望对你有帮助。

【讨论】：

你必须创建一个实现Filter接口的类，doFilter()是一个被覆盖的方法。您可以在那里配置 CORS 来源。