POST /api/sendimage 400 (BAD REQUEST) Flask restful API from browser

Question

I am using

Python 3.6.3
Flask==1.0.2
Flask-Cors==3.0.7
Flask-RESTful==0.3.7

for making an API which is used to collect tiff image using post method and save it locally.

api = Api(app)
CORS(app)

 class CatchImage(Resource):
    @cross_origin(supports_credentials=True)
    def post(self):
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            if which_extenstion(filename) != "tiff":
                return json.dumps({
                    "id": None,
                    "error": "Unsupported file type"
                })

            else:
                unique_id, folder_path, save_path = get_unique_id(filename)
                try:
                    file.save(save_path)
                except FileNotFoundError:
                    LookupError("no uploads folder")
                convert_jpg_save(save_path)
                jpg_image_path = get_jpg_image_path(folder_path)
                img = [
                    url_for("send_image", filename=image)
                    for image in jpg_image_path
                ]

                return jsonify({
                    "filename ": file.filename,
                    "id": unique_id,
                    "urls": img,
                    "error": None
                 })

        return json.dumps({"error": "no file"})

api.add_resource(CatchImage, '/api/sendimage')

I have tried the API using Postman which is working very fine. But when I try to access the API from Browser I get this

POST http://127.0.0.1:5000/api/sendimage 400 (BAD REQUEST)

The code for the same is below, which generated by Postman.

var form = new FormData();
form.append("file", "/home/blue/Templates/test.tiff");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://127.0.0.1:5000/api/sendimage",
  "method": "POST",
  "headers": {
    "cache-control": "no-cache",
    "Postman-Token": "4fdcc138-5567-4c4d-8f7d-8967d45b3c2a"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

I do think this has to do with CORS or setting some error which I not able to figure out.
I would like to understand what is the probable cause of the problem and it's mostly likely solutions.T hanks in advance for your time – if I’ve missed out anything, over- or under-emphasized a specific point let me know in the comments.

score 1 · Answer 1 · answered Feb 11 '19 at 16:47

1

400 (BAD REQUEST) means the data sent is not the data expected by the server. I do not think it is CORS related.

I would recommend to use pdb in your post function to find where the response is thrown.

import pdb; pdb.set_trace()

answered Feb 11 '19 at 16:47

Roch

94
6

score 0 · Answer 2 · answered Dec 30 '21 at 23:50

According to jQuery documentation, you must declare the data type:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

possibly adding this help:

dataType: "json",

References:

Getting 400 bad request error in Jquery Ajax POST

Jquery ajax post request not working

POST /api/sendimage 400 (BAD REQUEST) Flask restful API from browser

2 Answers2