AngularJS 和 Phonegap 跨域访问答案

【问题标题】：AngularJS and Phonegap Cross Origin AccessAngularJS 和 Phonegap 跨域访问
【发布时间】：2013-07-22 08:43:02
【问题描述】：

最近我为移动设备创建了一个PhoneGap App，使用AngularJS作为javascript框架。

我有一个 PHP 后端服务于 Restful JSON 数据，构建在 Laravel PHP 框架中。

PhoneGap App 使用 AngularJS 中的 $http 服务从我的 PHP 服务器请求数据，它在我的手机上完美运行。

现在我想让我的 PhoneGap 应用程序暂时在网站上可用，而不是在应用程序中。所以我将我的 PhoneGap 项目移到了一个网络服务器，但在这里它根本不起作用。我在自己的浏览器中尝试使用 webapp 时遇到这些错误。

“Access-Control-Allow-Origin 不允许Origin http://somewebsite.com。”。

我尝试向 AngularJS 添加一些配置参数，例如：

删除$httpProvider.defaults.headers.common['X-Requested-With'];

但似乎没有任何帮助。

我觉得它在我的手机和我的 iPhone 模拟器上作为 PhoneGap 应用程序工作有点奇怪，但它在我的新网络服务器域上不起作用。

有人知道该怎么做吗？

【问题讨论】：

你是如何设法在 phonegap 中使用 web 服务而不允许访问源为 true 的？

标签： angularjs cordova laravel

【解决方案1】：

最安全的方法是使用JSONP。在 laravel 你会做这样的事情：

Response::json(array('name' => 'Steve', 'state' => 'CA'))->setCallback(Input::get('callback'));

但是，如果您只想访问 open/public，请尝试将其添加到您的 public/.htaccess 文件中

Header set Access-Control-Allow-Headers: "Accept,Origin,Content-Type,X-Requested-With"
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE,OPTIONS"
Header set Access-Control-Allow-Credentials: "true"
Header set Access-Control-Allow-Origin "*"

【讨论】：

感谢您的回答。向公众开放我的 REST Api 是否足够安全？我已经在 Laravel 中的所有路由上创建了 AUTH 过滤器，因此只有经过身份验证的用户才能访问 API。
如果你有保护它，我不明白为什么不。

【解决方案2】：

当从移动网站访问 Web 服务时，它们应该具有访问源允许 true 设置或在 php 中启用 jsonp（非常安全的方式）。由于与应用不同，移动网站 JavaScript 无法通过浏览器访问其他域。

检查这些链接：

allow cross domain ajax requests

【讨论】：