Angular 4：使用离子3角4的后期CORS问题

Question

我非常感谢我从社区获得的指导。因此，我想问一个问题，请注意我已经耗尽了我的所有资源和谷歌找出问题的解决方案：

前端：使用ionic3 angular 4

后端：使用Laravel 5.4

到目前为止我们尝试过：

前端：

• 已安装的cordova白名单插件

• 在config.xml中添加了代理URL

后端：

• 为Laravel添加了白名单和标题

问题：

  

XMLHttpRequest无法加载

     

http://52.76.26.109/beacon/public/api/phonebook/create。回应   预检请求未通过访问控制检查：否   请求中存在“Access-Control-Allow-Origin”标头   资源。因此不允许来源“http://localhost:8100”   访问。

非常感谢任何有价值的投入。感谢。

附加：我忘了提及通过http的GET请求可以正常工作，而POST则没有。

Answer 1

您将仅从浏览器收到此错误。使用浏览器时，Cordova插件被禁用，因此在浏览器上进行测试时，白名单插件将被禁用。当您构建并在移动设备上安装它时，它将开始工作。如果您想从浏览器测试API。您应该安装CORS plugin并启用它。然后，您的http请求将通过。您无需使用JSONP请求。您可以使用正常的http请求

Answer 2

你的问题是由CORS引起的。

简单的解决方案是在Laravel项目中添加CORS（跨源资源共享）标头支持。

我建议你使用这个包：laravel-cors

如果您已经为laravel项目添加了标题。那么您应该仔细检查这些标题并确保添加标题。

如果添加正确，响应标题应该有一个项目 Access-Control-Allow-Origin:*