title: How to use React with Python and keep both frontend and backend separate?
body: <p>I am using React as <code>frontend</code> and  Python &amp; Flask as my <code>backend</code> with <code>Rauth</code> as <code>OAuth2</code> for Facebook login and storing details of every user in db and using <code>flask_login</code> as protection. Those information are Sports, Education, Phone number and other things.</p>
  
  <p>What I am doing is after user gets logged in I am trying to <code>fetch</code> his details from react app. But I am getting error user not logged in while on browser if I open that API I can see the <code>json</code>.</p>
  
  <pre><code>@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/&lt;provider&gt;')
  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/&lt;provider&gt;')
  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)
  </code></pre>
  
  <p>So from fronend I am calling <code>/authorize/&lt;provider&gt;</code> which then redirects to <code>/callback/&lt;provider&gt;</code> and logs user in.</p>
  
  <p>Now When I am opening <code>/me</code> on browser it works fine returns required <code>json</code> or redirects me to homepage.</p>
  
  <p>But when I am trying to fetch the api from frontend or Postman either I am getting user not found (if I remove the decorator <code>login_required</code>) or returning the whole homepage.</p>
  
  <p>I am fetching like this:</p>
  
  <pre><code>componentWillMount() {
      fetch('http://localhost:5000/me').then(function(response) {
        const contentType = response.headers.get("content-type");
        if(contentType &amp;&amp; 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); });
    }
  </code></pre>
  
  <p>My <code>frontend</code> is running on <code>http://localhost:3000/</code></p>
  
  <p><strong>Got the Answer</strong>
  Backend add this line after importing flask_cors</p>
  
  <pre><code>CORS(app, supports_credentials=True)
  </code></pre>
  
  <p>And Fetch using</p>
  
  <pre><code>fetch('http://localhost:5000/me', {
        method: 'GET',
        credentials: 'include'
      })
  </code></pre>