AngularJS HTTP Post請求中斷失敗

我一直在開發一個自定義PHP REST端點以與其他4個系統捆綁在一起，以及一個前端應用程序通過GET和POST與Endpoint進行通信。 API和Frontend應用程序都位於不同的域（systemapi.local和app.local，分別沒有立即計劃將它們移動到一個域中）。AngularJS HTTP Post請求中斷失敗

我有一個AngularJS調用到一個POST請求的端點之一，本質上是做一個登錄來獲得一個活動的會話。除了該方法本身運行POST請求外，基於Chrome的網絡輸出，我的瀏覽器顯然沒有POST請求。

我發送POST請求的方式有點奇怪，因爲我在x-www-form-urlencoded中發送了一個urlencoded JSON對象。從下面的代碼塊閃爍應該很容易。

//Runs on app.local/index.html 
var app = angular.module("FizzBuzzGate", []); 

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

app.config(['$sceDelegateProvider', function($sceDelegateProvider) { 
    $sceDelegateProvider.resourceUrlWhitelist([ 
     'self', 
     'http://systemapi.local:9001/**', 
     'http://systemapi.local/**' 
    ]); 
}]); 

/* Controllers */ 
app.controller('FizzBuzzGateLogin', function ($scope, $http) { 
    $scope.login = function() { 
    var username = document.getElementById("login_username").value; 
    var password = document.getElementById("login_password").value; 

    requestData = {}; 
    requestData.method = "login"; 
    requestData.data = '{"username":"'+username+'"},{"password":"'+password+'"}'; 
    requestData.dataStr = "method="+requestData.method+"&input_type=json&response_type=json&data="+encodeURIComponent(requestData.data); 

    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; 

    if(Boolean(username) && Boolean(password)) { 
     $http.post('http://systemapi.local:9001/api/login', requestData.dataStr).success(function(data, status, headers) { 
      alert("Request Success!"); 
     }).error(function(data, status, headers) { 
      alert("Error: " + headers); 
     }); 
    } else { 
     alert("Fields not populated, please check your fields and try again."); 
    } 
    }; 
}); 

/* Directives */ 
app.directive("loginForm", function() { 
    return { 
     restrict: 'E', 
     replace: false, 
     templateUrl: "js/templates/login.html" //Basically implements a login form, nothing significant 
    }; 
});

在REST API，我必須在每次調用所做的標題顯式聲明CORS設置：

header("Access-Control-Allow-Credentials: true"); 
header("Access-Control-Allow-Orgin: *"); 
header("Access-Control-Allow-Headers: Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"); 
header("Access-Control-Allow-Methods: GET, POST, DELETE, PUT, OPTIONS"); 
header("Content-Type: application/json"); 
header("X-API-Provider: FizzBuzzEnterprises");

儘管如此，角永遠不能發送成功的POST調用域。我不知道爲什麼。我在我的應用程序中進行了更改，以確保我可以根據我在Stack Exchange上所做的研究來做到這一點。我的代碼中缺少哪些可以解決此問題的內容？

來源

2016-02-26 Cameron Kilgore

瀏覽器JavaScript控制檯日誌中的任何錯誤？ –

這個問題其實並沒有在我的頭文件中設置CORS。我拼寫錯了「Origin」。解決這個問題，解決了這個問題。

來源

2016-02-28 00:56:15

AngularJS HTTP Post請求中斷失敗

回答

相關問題