Angular Ionic POST 405（不允许的方法），使用 Chrome

Question

我成功地向 skyscannerAPI 发送了 $http.post：http://partners.api.skyscanner.net/apiservices/pricing/v1.0 但是，我得到了 POST http://partners.api.skyscanner.net/apiservices/pricing/v1.0 405 (Method Not Allowed)，我通过 Info 搜索有人说这可能是因为我正在使用 Chrome，所以我安装了扩展程序 Allow-Control-Allow-Origin，但它仍然显示错误. 完整的错误消息显示如下：

POST http://partners.api.skyscanner.net/apiservices/pricing/v1.0 405 (Method Not Allowed)
    (anonymous) @ ionic.bundle.js:25005
    sendReq @ ionic.bundle.js:24798
    serverRequest @ ionic.bundle.js:24508
    processQueue @ ionic.bundle.js:29132
    (anonymous) @ ionic.bundle.js:29148
    $eval @ ionic.bundle.js:30400
    $digest @ ionic.bundle.js:30216
    $apply @ ionic.bundle.js:30508
    (anonymous) @ ionic.bundle.js:65428
    defaultHandlerWrapper @ ionic.bundle.js:16792
    eventHandler @ ionic.bundle.js:16780
    triggerMouseEvent @ ionic.bundle.js:2953
    tapClick @ ionic.bundle.js:2942
    tapTouchEnd @ ionic.bundle.js:3069

（匿名）@ ionic.bundle.js:25005 的代码如下：

xhr.send(isUndefined(post) ? null : post);

我的代码如下：

//service.js    
.service('skyscanner',function($http){
      var baseUrl= "http://partners.api.skyscanner.net/apiservices/pricing/v1.0";
      var bodyInfo= {
            body: {
              apikey: My_API_KEY,
              Country: "CA",
              Currency: "CAD",
              //more data......   
            }
          };
      this.getKey= function(){  
        var require_sessionkey= $http({
          method:"POST",
          url:baseUrl,
          data: bodyInfo,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept' :'application/json'
          }
        })
        .success(function successCallback() {
          var polling={};
          var session_key = require_sessionkey.headers["location"];
          (function(){
            polling=$http.get(session_key, {query: {apikey: My_API_KEY}});  
          })();
          return polling;
        }).error(function errorCallback() {
          console.log("something gets wrong: "+ require_sessionkey);
        });
      };
    })

//controller.js   
.controller('FlightSearchCtrl',function($scope,skyscanner,FlightInfos){
          $scope.list = [];
          $scope.text = 'hello';
          $scope.skyscannerPost= function(){
            var polling=skyscanner.getKey();
            $scope.polling=polling;
          };
        })

Answer 1

经过几个小时的研究，我找到了答案。我需要序列化我的数据，因为 Content-Type: 'application/x-www-form-urlencoded'，这意味着发送到服务器的 HTTP 消息的主体本质上是一个巨大的查询字符串——name/value 对由与号 (&) 分隔，名称和值之间用等号 (=) 分隔。这方面的一个例子是（参考）：

MyVariableOne=ValueOne&MyVariableTwo=ValueTwo

如果数据没有序列化，看起来像：

 console.log(bodyInfo);
//=> Object {apikey: "ds436195492025844505223424234232173", country: "CA", currency: "CAD", locale: "zh_Hans_CN", adults: 1…}

序列化后：

    console.log(bodyInfoSerialied);
  //=>apikey=ds436195492025844505223424234232173&country=CA&currency=CAD&locale=zh_Hans_CN&adults=1&children=0&infants=0&originPlace=YVR&destinationPlace=SHA&outboundDate=2017-01-19&inboundDate=2017-01-23&locationSchema=Iata&cabinClass=Economy

感谢 answer 我 post 下面编辑的代码：

    .service('skyscanner',function($http){
      var baseUrl= "http://partners.api.skyscanner.net/apiservices/pricing/v1.0";
      var bodyInfo= {
              'apikey': 'ds43619549203213123211202173',
              "country": "CA",
              "currency": "CAD",
              "locale": "zh_Hans_CN",
              //...       
          };
//new added serialize().
      serialize = function(obj, prefix) {
        var str = [], p;
        for(p in obj) {
          if (obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
            str.push((v !== null && typeof v === "object") ?
              serialize(v, k) :
              encodeURIComponent(k) + "=" + encodeURIComponent(v));
          }
        }
        return str.join("&");
      }
//serialize the body.
      var bodyInfoSerialied = serialize(bodyInfo);
      console.log(bodyInfo);
      console.log(bodyInfoSerialied);
      this.getKey= function(){  
        var require_sessionkey= $http({
          method:"POST",
          url:baseUrl,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept' :'application/json'
          },
          data:bodyInfoSerialied
        })
        .success(function successCallback(require_sessionkey) {
          console.log(require_sessionkey);
          var polling={};
          var session_key = require_sessionkey.headers["Location"];
          (function(){
            polling=$http.get(session_key, {query: {apikey: 'ds43619549203213123211202173'}});  
          })();
          return polling;
        }).error(function errorCallback(require_sessionkey) {
          console.log("something gets wrong: "+ require_sessionkey);
          console.log("bodyInfoSerialied: "+ bodyInfoSerialied);
        });
      };
    })

请注意代码仍然有问题，但至少解决了 405 错误。

Angular Ionic POST 405（不允许的方法），使用 Chrome

Angular Ionic POST 405 (Method Not Allowed), using Chrome

javascript

cross-domain

cors

angularjs

skyscanner