Angular 4：使用 ionic 3 angular 4 发布的 CORS 问题答案

【问题标题】：Angular 4: CORS Issue on Post using ionic 3 angular 4Angular 4：使用 ionic 3 angular 4 发布的 CORS 问题
【发布时间】：2017-12-29 13:13:24
【问题描述】：

我非常感谢社区提供的指导。因此，我想问一个问题，请注意我已经用尽我所有的资源和谷歌来找出解决这个问题的方法：

前端：使用 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 无效。

【问题讨论】：

你试过 jsonp 吗？作为一个跨域请求。
嗨@ASLAMTP 这是在前端还是后端尝试的东西？如果可以的话，你能提供一个示例实现吗？谢谢
可能是您的 porxy 没有正确添加。
AngularJS & Laravel CORS, POST stops after preflights OPTIONS的可能重复
最好处理来自服务器端的此类请求。因为这将是一个安全问题。不要从客户端发出跨域请求

标签： angular laravel-5 ionic3

【解决方案1】：

您只会从浏览器收到此错误。 Cordova 插件在使用您的浏览器时被禁用，因此在您的浏览器上测试时白名单插件将被禁用。当您进行构建并将其安装在您的手机上时，它将开始工作。如果您想从浏览器测试 API。您应该安装 CORS plugin 并启用它。然后，您的 http 请求将通过。您不需要使用 JSONP 请求。您可以使用普通的 http 请求

【讨论】：

谢谢！将尝试此建议并为您提供更新。是的，我正在从我的笔记本电脑上开发应用程序，因此从开发人员的角度来看，检查机器上的错误要容易得多，而不是每次在设备上重新部署它
@AlfredM。如果您觉得答案有帮助，请将其标记为正确:-)

【解决方案2】：

您的问题是由 CORS 引起的。

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

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

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

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

【讨论】：

谢谢！将尝试这个并用结果更新你