如何在Python中使用React并保持前端和后端分离？ [重复]

Question

这个问题已经在这里有了答案：

• 从Flask视图返回JSON响应 9个答案

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

我正在做的是在用户登录后，我试图从react应用程序中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)

所以从朋友那里我打电话给/authorize/<provider> ，然后重定向到/callback/<provider>并登录用户。

现在，当/me在浏览器中打开/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

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

使用rxjs通过“服务”从api获取数据