Ionic App 和连接到 Spring 后端的独立 Angular 应用程序出现 CORS 错误答案

【问题标题】：CORS error with Ionic App and standalone angular app connecting to Spring backendIonic App 和连接到 Spring 后端的独立 Angular 应用程序出现 CORS 错误
【发布时间】：2020-03-31 04:07:21
【问题描述】：

我的后端在 SpringBoot 上运行，并且我使用过滤器方法启用了 CORS，这就是我的 SpringCORSFilter 的样子：

@Component
public class SimpleCORSFilter implements Filter {

private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);

public SimpleCORSFilter() {
    log.info("SimpleCORSFilter init");
}

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

    HttpServletRequest request = (HttpServletRequest) req;
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

    chain.doFilter(req, res);
}

@Override
public void init(FilterConfig filterConfig) {}

@Override
public void destroy() {}

}

我有 2 个前端应用程序，它们都有类似的 HTTP 标头设置。看起来像这样：

 let headers = new HttpHeaders({
            'Content-Type':  'application/json',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
            'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, X-Requested-With',
          });

在我的独立 Angular 应用程序中，我只在 firefox 或移动浏览器上看到这些问题，但在 chrome 浏览器上完全没有问题。

我附上了一张我是的图片。

关于如何解决此问题的任何想法？

编辑 1：所以我已经要求几个用户测试核心应用程序以及我的独立应用程序，我们在这两种情况下都看到了 CORS 问题。

【问题讨论】：

参考这个stackoverflow.com/questions/46788969/…

标签： angular spring-boot cors ionic4

【解决方案1】：

使用本地 HTTP 模块进行 ajax 调用。这是链接 https://ionicframework.com/docs/native/http

【讨论】：

【解决方案2】：

所以这件事花了很长时间才完成，我意识到有几件事非常重要，尤其是在尝试解决 CORS 问题时。

深呼吸，放松；可能/可能不需要 3-4 天才能解决问题，但肯定需要一些时间并制定正确的计划到位将帮助您解决问题。拥有一个可以重现问题并始终可用的环境也很重要。我意识到这个问题发生在所有前端应用程序和所有浏览器中。
此问题可能是因为您的后端配置不正确，甚至您的前端配置不正确。
我必须从后端的角度检查以下几点：
后端实际上已启动并正在运行。
在 spring-boot 的情况下，如果有任何注释阻止任何 api 调用。摆脱@EnableWebMvc 并重新部署项目后，API 调用成功。
对 Spring boot 的更改以启用 CORS

@Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings( CorsRegistry registry) { registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS").allowedOrigins("*") .allowedHeaders("*").maxAge(-1) // add maxAge .allowCredentials(false); } }; }
也来自前端；确保每个 API 调用都有关联的标头。

每个 CORS 错误都有解释，彻底理解这一点很重要。在我们的案例中，更多的是 SSL 证书无法在所有浏览器中信任。此ssl checker 用于验证 SSL 证书，并进行了相应更改以将 SSL 证书部署到后端。这样，我们就能够克服 SSL 问题。

【讨论】：