离子应用程序中的CORS问题

Question

我正在构建一个简单的离子/角度移动应用程序。我正在使用IntelliJ IDEA进行开发。

在开发过程中，我只使用Intellij终端的'ionic serve'命令，在浏览器中启动移动应用程序。该应用程序连接到部署在Tomcat服务器上的REST服务。

当应用尝试连接到REST服务时，它会在浏览器控制台中显示以下错误

  

XMLHttpRequest无法加载http://localhost:8080/MyWorkflows/rest/UserService/users。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:8100”访问。响应的HTTP状态代码为500。

我理解这种情况正在发生，因为REST服务在不同的域上运行，因此浏览器会阻止它。但是，我不知道该怎么办？

有人可以帮忙。

Answer 1

在Tomcat上部署的REST服务中，您应该设置 Access-Control-Allow-Origin：http://localhost:8100 ，并且您需要允许使用 Access-的http请求方法Control-Allow-Methods：POST，GET，OPTIONS 。

这告诉浏览器您的服务允许在http://localhost:8100上运行的Web应用程序访问该服务。浏览器会根据资源请求进行检查。对于GET以外的http请求方法，可能会添加额外的预检请求，因此您需要让WebService回答这个问题。

请参阅https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Answer 2

如果您不控制远程终端，请使用离子CLI代理服务器。 Ionic博客上有非常好的操作方法文章：Handling CORS issues in Ionic。