Question

我有一个使用Play Framework / Java开发的REST API，以及在Angular JS中开发的前端。

我正在尝试使用以下代码将Angular Client的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和谷歌浏览器的控制台中也出现错误：

阻止跨源请求：同源策略禁止在http://localhost:9000/login读取远程资源。（原因：缺少CORS标题'Access-Control-Allow-Origin'）。错误：{＆＃34;数据＆＃34;：null，＆＃34;状态＆＃34;： - 1，＆＃34; config＆＃34;：{＆＃34;方法＆＃34;：＆＃34; POST＆＃34;＆＃34; transformRequest＆＃34;：[空]，＆＃34; transformResponse＆＃34;：[空]，＆＃34; jsonpCallbackParam＆＃34;：＆＃34;回调＆＃34;＆＃ 34; URL＆＃34;：＆＃34; http://localhost:9000/login＆＃34;＆＃34;数据＆＃34; {＆＃34;电子邮件＆＃34;：＆＃34; XXX＆＃34;，＆＃34;密码＆＃34;：＆＃34; XXX＆＃34;}＆＃34;头＆＃34; {＆＃34;内容类型＆＃34;：＆＃34;应用/ JSON＆＃34 ;, ＆＃34;接受＆＃34;：＆＃34; application / json，text / plain， / ＆＃34;}}，＆＃34; statusText＆＃34;：＆＃34;＆＃34;}

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

那么，那可能是什么问题呢？客户端是否有一些我遗漏的东西？

Answer 1

POSTMAN请求和浏览器请求之间的区别是浏览器在实际的POST / GET请求之前发送OPTIONS请求。

能够接受播放框架中的OPTION请求allowedHttpMethods = [＆＃34; GET＆＃34;，＆＃34; POST＆＃34; ＆＃34; OPTIONS＆＃34;] 请点击此链接 Play Framework 2.3 - CORS Headers

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

要解决问题，您需要分析选项请求的进行方式以及解释方式和解决方法。但总的来说，我建议使用＆＃34; fetch＆＃34;内置的请求，支持promise，因此可以使用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));
});
}

即使在发送CORS标头

1 个答案: