ionic-framework - Ionic + Jhipster oauth2 错误无访问控制

Question

一直在尝试使用 Jhipsters oauth2 登录与本地主机上的 ionic 应用程序，并不断获得:

选项 http://172.16.40.31:8080/oauth/token (匿名函数)@ionic.bundle.js:23826sendReq @ionic.bundle.js:23645serverRequest @ionic.bundle.js:23357processQueue @ionic.bundle.js:27879(匿名函数)@ionic.bundle.js:27895Scope.$评估@ionic.bundle.js:29158Scope.$digest@ionic.bundle.js:28969Scope.$apply@ionic.bundle.js:29263(匿名函数)@ionic.bundle.js:36615eventHandler@ionic.bundle.js: 16583triggerMouseEvent @ionic.bundle.js:2948tapClick @ionic.bundle.js:2937tapMouseUp @ionic.bundle.js:3013？ ionic 平台=机器人:1XMLHttpRequest 无法加载 http://172.16.40.31:8080/oauth/token .对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。产地' http://localhost:8100 ' 因此不允许访问。响应具有 HTTP 状态代码 401。？ ionic 平台=机器人:1XMLHttpRequest 无法加载 http://172.16.40.31:8080/api/logout .请求的资源上不存在“Access-Control-Allow-Origin” header 。产地' http://localhost:8100 ' 因此不允许访问。

我已经尝试添加 google 插件，但没有任何改变。确保.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()在设置中。

还有什么我想念的吗？

Answer 1

尝试在 application.yml

中取消注释 cors

cors: #By default CORS are not enabled. Uncomment to enable.
        allowed-origins: "*"
        allowed-methods: GET, PUT, POST, DELETE, OPTIONS
        allowed-headers: "*"
        exposed-headers:
        allow-credentials: true
        max-age: 1800

要在 ionic 中使用 Oauth2 身份验证访问 REST API，您必须首先通过以下方式在 ionic 应用程序中获取 token

    $http({
    method: "post", 
    url: "http://192.168.0.4:8085/[Your app name]/oauth/token",
    data:  "username=admin&password=admin&grant_type=password&scope=read write&client_secret=my-secret-token-to-change-in-production&client_id=auth2Sconnectapp",
    withCredentials: true,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/json',
      'Authorization': 'Basic ' + 'YXV0aDJTY29ubmVjdGFwcDpteS1zZWNyZXQtdG9rZW4tdG8tY2hhbmdlLWluLXByb2R1Y3Rpb24='
      }
  })                
  .success(function(data) {
      alert("success: " + data);
  })
  .error(function(data, status) {
      alert("ERROR: " + data);
  });

此处“YXV0aDJTY29ubmVjdGFwcDpteS1zZWNyZXQtdG9rZW4tdG8tY2hhbmdlLWluLXByb2R1Y3Rpb24=”等于 (clientId + “:” + clientSecret)——所有 base64 编码

你可以使用https://www.base64encode.org/为自己验证或重新创建它

aboue $http 如果成功会给你这个 JSON

{
  "access_token": "2ce14f67-e91b-411e-89fa-8169e11a1c04",
  "token_type": "bearer",
  "refresh_token": "37baee3c-f4fe-4340-8997-8d7849821d00",
  "expires_in": 525,
  "scope": "read write"
}

如果您想访问任何 API，请注意“access_token”和“token_type”，这是您必须使用的。

例如

$http({
    method: "get", 
    url: "http://192.168.0.4:8085/auth-2-sconnect/api/countries",
    withCredentials: true,
    headers: {
      'Authorization':' [token_type] + [space] + [access_token] '
      }
  })                
  .success(function(data) {
      alert("success: " + data);
  })
  .error(function(data, status) {
      alert("ERROR: " + data);
  });