React, Axios and Flask - AttributeError: 'NoneType' object has no attribute 'get'

Question

I'm trying to post some data from my react component via axios to my Flask server, like so:

handleSubmitSeeds(event) {
    event.preventDefault();
    const {userId} = this.props
    const data = {
      arabica: this.state.formSeeds
    };
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/handle_seeds/${userId}`;
    axios.post(url, data)
      .then((res) => {
        console.log(data);
      })
      .catch((err) => {
      });
  };

and at backend:

@seeds_bp.route('/handle_seeds/<user_id>', methods=['GET','POST'])
def handle_seeds(user_id):

    post_data = request.get_json()

    arabica = post_data.get('arabica')

    (...)

but i'm getting the following traceback:

AttributeError: 'NoneType' object has no attribute 'get'

what am I missing?

kellykels21 · Answer 1 · 2019-09-25T02:35:52.637

0

It looks like whatever you are returning from post_data = request.get_json() isn't returning the type of object you're trying to use the get() method from.

Try console logging the request object to see if you can see the JSON object attached to it.

edited Sep 25 '19 at 02:35

answered Sep 25 '19 at 02:30

kellykels21

47
10

no, [get_json](https://flask.palletsprojects.com/en/1.1.x/api/#flask.Request.get_json) is flask method – 8-Bit Borges Sep 25 '19 at 02:33
referencing this thread here: https://stackoverflow.com/questions/43126956/get-json-from-request-flask I think Axios automatically stringifies JSON on POST request so it may not be coming through as JSON. – kellykels21 Sep 25 '19 at 02:36
I have tried passing `headers = {'content-type': 'application/json'} ` as well, to no avail. – 8-Bit Borges Sep 25 '19 at 02:42
Have you tried accessing the data via the form request.form.get('arabica')??. At this point, I just want to determine whether the data is making it to your request object on the backend – kellykels21 Sep 25 '19 at 02:47
try passing like this `.post(url,data,{ 'content-type': 'application/json' })` – Alaa Aqeel Sep 25 '19 at 02:48
^_^ sorry passing headers by this way `.post(url,data,{headers:{ 'content-type': 'application/json'} })` https://github.com/axios/axios#request-method-aliases – Alaa Aqeel Sep 25 '19 at 02:59

score 0 · Accepted Answer · answered Sep 25 '19 at 03:48

A header with Content-Type and authorization bearer was missing. Once I did:

var headers = {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${window.localStorage.authToken}`
        }

and passed it like so:

axios.post(url, data, headers)

request.get_json() worked.

React, Axios and Flask - AttributeError: 'NoneType' object has no attribute 'get'

2 Answers2