即使在发送 CORS 标头后从浏览器发送请求到播放服务器时也出现 CORS 错误

Question

我有一个使用 Play Framework/Java 开发的 REST API 和使用 Angular JS 开发的前端。

我正在尝试使用以下代码从 Angular 客户端向服务器调用 POST 方法：

$scope.login = function () {
console.log('login called');
var loginURL = 'http://localhost:9000/login';
var loginInfo = {
    'email': $scope.email,
    'password': $scope.password
};

$http({
    url: loginURL,
    method: 'POST',
    data: loginInfo,
    headers: { 'Content-Type': 'application/json' }
}).then(function (response) {
    console.log('SUCCESS: ' + JSON.stringify(response));
    $scope.greeting = response.status;
}, function (response) {
    console.log('ERROR: ' + JSON.stringify(response));
});
}

这是我服务器上的代码：

public Result doLogin() {
    ObjectNode result = Json.newObject();
    result.put("status", "success");
    return ok(result).withHeader("Access-Control-Allow-Origin", "*");
}

这是应用程序配置文件：

#allow all hosts.
play.filter.hosts {
    allowed = ["."]
}

#allow CORS requests.
play.filters.cors {
  allowedOrigins = ["*"]
}

即使在启用 CORS 之后，我在 Firefox 和 Google Chrome 的控制台中都出现错误：

跨域请求被阻止：同源策略不允许读取位于http://localhost:9000/login 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。 错误：{"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":" callback","url":"http://localhost:9000/login","data":{"email":"xxx","password":"xxx"},"headers":{"Content-Type":"application/json ","Accept":"application/json, text/plain, /"}},"statusText":""}

我确实知道服务器正在发送正确的响应和正确的标头，因为当我从 Postman 执行 POST 时，我可以看到响应以及包含 {"Access-Control-Allow-Origin", "* "} 在邮递员中。

那么，可能是什么问题？客户端有什么我遗漏的吗？

Answer 1

POSTMAN 请求和浏览器请求的区别在于浏览器在实际的 POST / GET 请求之前发送了一个 OPTIONS 请求。

为了能够使用您的播放框架接受 OPTION 请求 allowedHttpMethods = ["GET", "POST" ,"OPTIONS"] 按照这个链接 Play Framework 2.3 - CORS Headers

这会导致从框架（如 angularjs）访问 CORS 请求时出现问题。找到请求的选项并正确采取行动变得困难或框架。

为了解决您的问题，您需要分析选项请求的运行方式以及它是如何被解释的以及如何克服。但总的来说，我建议对此使用“fetch”内置请求，它支持承诺，因此可以轻松地与 angularjs 代码链接

所以你的代码看起来像这样

    $scope.login = function () {
  console.log('login called');
  var loginURL = 'http://localhost:9000/login';
  var loginInfo = {
      'email': $scope.email,
      'password': $scope.password
  };
fetch(loginURL, {
  method: 'post',
  headers: {
      "Content-type": "application/json"
  },
  body: loginInfo
}).then(function (response) {
  console.log('SUCCESS: ' + JSON.stringify(response));
  $scope.greeting = response.status;
}, function (response) {
  console.log('ERROR: ' + JSON.stringify(response));
});
}