Question

我一直在开发一个自定义的PHP REST端点，用于与一组其他4个系统进行交互，以及一个通过GET和POST与端点进行通信的前端应用程序。 API和前端应用程序分别位于不同的域（systemapi.local和app.local，没有立即计划将它们移动到一个域中）。

我有一个针对POST请求的端点之一的AngularJS调用，实质上是进行登录以获得活动会话。除非方法本身运行以进行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");

但是，Angular永远不会向域发送成功的POST调用。而且我不确定为什么。我在我的应用程序中进行了更改，以确保我可以根据我在Stack Exchange上完成的研究来做到这一点。我的代码中缺少什么可以解决这个问题？

Answer 1

问题实际上是我在标题中根本没有设置CORS。我拼错了“Origin”。解决这个问题，解决了这个问题。

AngularJS HTTP Post请求在中途失败

1 个答案: