Question

我使用React作为frontend和Python＆amp; Flask作为我的backend Rauth为OAuth2用于Facebook登录并存储db中每个用户的详细信息并使用flask_login作为保护。这些信息包括体育，教育，电话号码等。

我正在做的是在用户登录后我试图通过反应应用程序fetch提供他的详细信息。但是我收到错误用户在浏览器时未登录，如果我打开该API，我可以看到json。

@login_manager.user_loader
def load_user(id):
    return User.select().where(User.id == id).first()


@app.route('/')
def index():
    return redirect(WEB_URL)


@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(WEB_URL)


@app.route('/me')
@login_required  # After removing decorator still I am not getting
def me():
    return jsonify({'email': current_user.email}), 200



@app.route('/authorize/<provider>')
def oauth_authorize(provider):
    if not current_user.is_anonymous:
        return redirect(WEB_URL)
    oauth = OAuthSignIn.get_provider(provider)
    return oauth.authorize()


@app.route('/callback/<provider>')
def oauth_callback(provider):
    if not current_user.is_anonymous:
        return redirect(WEB_URL)
    oauth = OAuthSignIn.get_provider(provider)
    social_id, username, email = oauth.callback()
    if social_id is None:
        return redirect(WEB_URL)
    user = User.select().where(User.social_id == social_id).first()
    if not user:
        user = User(social_id=social_id, nickname=username, email=email)
        user.save()
    login_user(user, True)
    return redirect(WEB_URL)

所以从fronend我调用/authorize/<provider>然后重定向到/callback/<provider>并将用户登录。

现在当我在浏览器上打开/me时，它可以正常返回json或将我重定向到主页。

但是当我尝试从前端或Postman获取api时，我找不到用户（如果我删除了装饰器login_required）或返回整个主页。

我是这样的：

componentWillMount() {
    fetch('http://localhost:5000/me').then(function(response) {
      const contentType = response.headers.get("content-type");
      if(contentType && contentType.includes("application/json")) {
        return response.json();
      }
    }).then(function(json) {
        debugger
        const self = this;
        if (json) self.serState({ loggedIn: true });     
    }).catch(function(error) { console.log(error); });
  }

我的frontend正在http://localhost:3000/

上投放

得到答案 导入flask_cors后，后端添加此行

CORS(app, supports_credentials=True)

使用

获取

fetch('http://localhost:5000/me', {
      method: 'GET',
      credentials: 'include'
    })

Answer 1

安装烧瓶 https://flask-restful.readthedocs.io/en/latest/

使用rxjs使用“服务”

从api中获取数据

如何使用React与Python并保持前端和后端分开？

1 个答案: