Ionic App和独立的角度应用程序连接到Spring后端时发生CORS错误

Question

我的后端在SpringBoot上运行，并且我已经使用filter方法启用了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',
          });

在我的独立角度应用程序中，我仅在Firefox或移动浏览器上看到了这些问题，而在chrome浏览器上却没有看到任何问题。

我已在图像上附加了这个问题。

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

编辑1：因此，我已经请几个用户同时测试核心应用程序和我的独立应用程序，在两种情况下我们都看到CORS问题。

Answer 1

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

Answer 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问题。