在 Ionic 中设置 CORS

Question

我正在创建我的第一个 ionic 应用程序，但我正在与 cors 作斗争，我在这方面没有太多经验，所以这个问题可能看起来很愚蠢。

我无法访问 api 站点，因此我无法在那里进行任何更改。这是我用来从 api 站点获取数据的代码。我读到 cors 只是在使用 ionic serve 进行测试时出现问题，但我尝试构建 android 应用程序并将 apk 传输到我的 phone，但它似乎不起作用也有（而且我无法在我的 phone offcourse 上看到控制台日志来测试它:)）

  app.controller('VolleyCtrl', function($http, $scope) {
      $scope.wedstrijden = [];
      $http.get('http://www.volleyadmin2.be/services/wedstrijden_xml.php?province_id=5&stamnummer=O-0696&format=json')
        .success(function(response) {
          angular.forEach(response, function(child) {
            $scope.wedstrijden.push(child);
          })
        });

  });

Answer 1

If you're using a newer version of Cordova (or the latest Ionic CLI) to develop your app, you may be experiencing http 404 errors when your app tries to make network requests.

这可以通过 Cordova Whitelist plugin 快速解决。

您可以在 Ionic docs: Cordova Whitelist 上找到更多文档。

解法：

运行在您的 shell/terminal 中执行以下命令：

ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

您现在唯一需要做的就是将属性添加到您的 config.xml 文件：

<allow-navigation href="*" />

Answer 2

可能有很多原因。

处理 CORS 意味着配置后端和前端。在您的后端，取决于您的 api 是哪个 Web 服务器运行。

我认为您不会使用“...您可以通过使用 --disable-web-security 标志打开它来禁用它检查 cors...”

最好在控制器中只处理一个 http promise 并将 http 请求移动到一个服务上。我可以告诉您我修复了什么以避免 CORS 预检问题。

默认情况下，Angular 在 $http.defaults.headers.{HTTP_VERB}.

中设置 headers

我的案例是 $http.defaults.headers.post 'Content-type' : 'application/json'。这种内容类型触发了 chrome 中的 cors。如果您手动设置 'Content-Type' 也没关系。这是在 Angular.

中默认设置的

所以修复方法是转到您的 app.js 文件并在 .config 部分中插入您的代码，这将有点像

app.config(['$http', function ($http) { //Reset headers to avoid OPTIONS request (aka preflight) $httpProvider.defaults.headers.post = {}; }]);

Answer 3

尝试了很多解决方案都没有运气，最后

cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview@latest

解决了我的问题。

在 Ionic 中设置 CORS

Setting up CORS in Ionic

cors

angularjs

ionic