How to send params through axios get request and receive them in flask?-CodePudding

I am trying to send 2 params to the backend through a get request that returns some query based on the params I send to the backend. I am using React.js front end and flask python backend.

My get request looks like this:

async function getStatsData() {
    const req = axios.get('http://127.0.0.1:5000/stat/', {
        params: {
            user: 0,
            flashcard_id: 1
        },
        headers: {'Access-Control-Allow-Origin': '*', 'X-Requested-With': 'XMLHttpRequest'},
    })
    const res = await req;
    return res.data.results.map((statsItem, index) => {
        return {
            stat1: statsItem.stat1,
            stat2: statsItem.stat2,
            stat3: statsItem.stat3,
            stat4: statsItem.user,
            key: statsItem.key
        }
    })
}

and then my route in the backend is this:

@app.route('/stat/<user>/<flashcard_id>', methods=['GET', 'POST', 'OPTIONS'])
def stats(user, flashcard_id):
  def get_total_percent_correct(user):
    correct = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE guess = answer AND user_id = %s' % user)[0][0]
    total = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE user_id = %s' % user)[0][0]
    try:
        return round(float(correct)/float(total),3)*100
    except:
        print('0')
  
  def get_percent_correct_for_flashcard(user,flashcard_id):
    total = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE user_id = %s AND flashcard_id = %s' % (user, flashcard_id))[0][0]
    correct = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE flashcard_id = %s AND guess = answer AND user_id = %s' % (flashcard_id, user))[0][0]
    try:
        return round(float(correct)/float(total),3)*100
    except:
        print('0')

  def get_stats_for_flashcard(user_id, flashcard_id):
    attempts = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE user_id = %s AND flashcard_id = %s' % (user_id, flashcard_id))[0][0]
    correct = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE flashcard_id = %s AND guess = answer AND user_id = %s' % (flashcard_id, user_id))[0][0]
    missed = attempts - correct
    return attempts, correct, missed
  
  data = [{
    "stat1": get_total_percent_correct(user),
    "stat2": get_percent_correct_for_flashcard(user, flashcard_id),
    'stat3': get_stats_for_flashcard(user, flashcard_id),
    'user': user,
    'key':999
  }]

  return {"response_code" : 200, "results" : data}

When I go to http://127.0.0.1:5000/stat/0/1 in my browser, the stats are shown correctly but the get request is not working because it says xhr.js:210 GET http://127.0.0.1:5000/stat/?user=0&flashcard_id=1 404 (NOT FOUND) . So clearly I'm not sending or receiving the params correctly. Does anyone know how to solve this? Thank you for your time

CodePudding user response：

In your backend route you are expecting the values in url as dynamic segment, not as query sring.

Solution:

You can modify the axios request like this:

  const user = 0;
  const flashcard_id = 1;
  const req = axios.get(`http://127.0.0.1:5000/stat/${user}/${flashcard_id}`,{
    headers: {'Access-Control-Allow-Origin': '*', 'X-Requested-With': 'XMLHttpRequest'},
})

or you can modify flask route like this:

from flask import request

@app.route('/stat/', methods=['GET', 'POST', 'OPTIONS'])
def stats():
    user = request.args.get('user')
    flashcard_id = request.args.get('flashcard_id')

CodePudding user response：

Send the parameters like this:

 const req = axios.get(`http://127.0.0.1:5000/stat/${user}/${flashcard_id}`)

and in Flask you receive the parameters like this:

@app.route('/stat/<user>/<flashcard_id>', methods=['GET', 'POST', 'OPTIONS'])
def stats(user, flashcard_id):