Jhipster Spring 后端 - 社交登录和 React Native 前端

Posted 2023-02-16

【中文标题】Jhipster Spring 后端 - 社交登录和 React Native 前端

【英文标题】：Jhipster Spring backend - Social login & React Native frontend

【发布时间】：2019-08-16 08:00:11

【问题描述】：

我创建了 Spring 作为后端并启用了社交登录以进行 google 身份验证。 /signin/google 是带有 POST 方法的端点，内容类型是 application/x-www-form-urlencoded 和 scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email。

如果我从邮递员客户端（谷歌浏览器应用程序）调用上述端点，邮递员客户端工作得非常好，它会给我 200 个状态代码和 JSESSIONID，我可以调用其他安全 API。

但是对于本机反应，我无法执行它。帮助将不胜感激。下面提到的是我用来触发谷歌登录的功能。

googleSignin = () => 
      var data = 'scope=' + encodeURIComponent('https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email');
      axios(
        url: baseUrl + 'signin/google',
        method: 'POST',
        data: data,
        config: 
          headers:
          
            'cache-control': 'no-cache',
            'content-type': 'application/x-www-form-urlencoded',
            'Access-Control-Allow-Credentials': true,
            'Access-Control-Allow-Origin': true
          ,
          credentials: "same-origin"
        ,
        withCredentials: true
      )
        .then(res => 
          console.log('googleSignin res() ---> ', res.headers);

        )
        .catch(e => console.log(e));
    ;

它总是给我 CORS 错误策略。下面提到的是后端的cors配置。

allowed-origins: "*"
allowed-methods: "*"
allowed-headers: "Access-Control-Allow-Headers, Authorization, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"
exposed-headers: "Authorization,Link,X-Total-Count"
allow-credentials: true
max-age: 1800

截图是错误：

【参考方案1】：

这是一个cross-domain 问题。在jQuery 1.5.0 及更高版本之后，cross-domain 被阻止。结果ajax请求时出现如下错误：

试试这个代码。

const options = baseUrl + 'signin/google'



$.ajaxPrefilter( function (options) 

  if (options.crossDomain && jQuery.support.cors) 

    var http = [removed].protocol === 'http:' ? 'http:' : 'https:');

    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;

  

);



$.post(

options,

    function (response) 

        console.log(">>>> " + JSON.stringify(response));

);

【讨论】：

特定于 react native 作为前端，jhipster spring 作为后端和 google 登录问题。