离子中的 REST API 调用答案

【问题标题】：REST API call in ionic离子中的 REST API 调用
【发布时间】：2017-06-17 09:17:29
【问题描述】：

我无法在我的 ionic 应用程序中对我的服务器进行 REST API 调用。它显示以下错误。

ionic.bundle.js:25005 OPTIONS https://website.com/api/ionic_test 406（不可接受）

XMLHttpRequest 无法加载 https://website.com/api/ionic_test。预检响应包含无效的 HTTP 状态代码 406

API 调用代码。

$http.post(API_ENDPOINT.url + '/ionic_test', user).then(function(result) {
                    if (result.data.status) {
                        storeUserCredentials(result.data.token);
                        resolve(result.data.msg);
                    } else {
                        reject(result.data.msg);
                    }
                });

ionic.config.json

{
  "name": "adminPanel",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://website.com/api"
    }
  ]
}

【问题讨论】：

查一下CORS，已经有不少问题和答案了。
事实上，No 'Access-Control-Allow-Origin' header is present "stackoverflow.com/…" 有 2,817 个问题
@Claies 我经历了很多类似的问题。启用 CORS 给了我这个错误。问题已被编辑
这似乎是服务器问题，而不是离子问题...这是什么类型的服务器？路线是什么样的？此外，错误显示https://； http:// 仍然会出现同样的错误吗？
@Claies 当我在浏览器中获取 url 时，我得到了响应。但不在离子应用程序中。你想要完整的 api url 吗？

标签： angularjs ionic-framework http-status-code-406

【解决方案1】：

问题出在您的服务器上。在 cmets 中，您说 API 在浏览器中有效，但在您的应用程序中无效。那是因为您的浏览器没有发送 OPTIONS "preflight" 请求，而 Ionic 会这样做。

您需要disable the preflight request，或配置您的服务器以正确处理它。

【讨论】：

【解决方案2】：

在您的应用配置中使用这些来解决预检问题

$httpProvider.defaults.headers.common = {};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};

例如。

angular.module('yourApp', [])

.config(function ($stateProvider, $httpProvider, $urlRouterProvider) {

    //To solve Response for preflight has invalid HTTP 
    $httpProvider.defaults.headers.common = {};
    $httpProvider.defaults.headers.post = {};
    $httpProvider.defaults.headers.put = {};
    $httpProvider.defaults.headers.patch = {};


    //--------------------------------------

    // your routes here
});

【讨论】：