2

Estoy intentando hacer una llamada POST a una api que he creado en Flask. He añadido flask_cors para permitir el "cross-origin".

app = Flask(__name__)
CORS(app)

Basicamente lo que quiero es mandar una imagen a mi api, hacer cosas con esta imagen, y devolver una respuesta.

En principio todo funciona bien, siempre y cuando en el header el content type sea

content-type: 'text/plain'

Sin embargo si cambio el content-type a

'content-type: image/jpeg'

me sale este error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://direccionurl.com/api. (Reason: CORS request did not succeed)

He intentado de todo y no funciona nada. Según la documentacion de mdn este tipo de llamadas se llaman Preflighted requests y lo que hace es mandar OPTIONS al servidor primero para asegurarse de que es seguro hacer la siguiente llamada (en este caso mandar una imagen). Pero haga lo que haga me sale el error.

Es la primera vez que uso Flask, y no soy muy experto en estas cosas. Alguien tiene alguna idea de como resolver esto?

Javascript (imageFile es un objeto File):

axios.post('http://direccionurl.com/api', imageFile,
    {
      headers: {
        'Content-Type': imageFile.type
      }
    }
  ).then((response) => {
    console.log(response.data)
  }).catch((error) => {
    console.log('Error');
  });

Servidor Flask:

from flask import Flask
from flask_cors import CORS, cross_origin
from PIL import Image

app = Flask(__name__)
CORS(app)

@app.route("/", methods = ['GET'])
def root():
  return "hello world"

@app.route("/api/", methods = ['POST', 'OPTIONS'])
def predict():
  img = request.data
  print(img)
  return "It worked?"

if __name__ == '__main__':
 app.run(host="0.0.0.0", port=80)

Estas son las cabeceras de la llamada cuando hago POST:

Status 301, Method OPTIONS

Response Headers:

Access-Control-Allow-Headers:content-type
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Access-Control-Allow-Origin: http://localhost:8080
Content-Length: 347
Content-Type: text/html; charset=utf-8
Date: Fri, 15 Feb 2019 10:55:40 GMT
Location: http://direccionurl.com/api/
Server: Werkzeug/0.14.1 Python/3.7.1
Vary: Origin

Request Headers:

Accept: text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en;q=0.5
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection:keep-alive
Host: direccionurl.com
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/62.0

Gracias!

6
  • Quizás entre las cabeceras que responde el servidor no está la Access-Control-Allow-Headers: Content-Type. Más útil que el código podría ser el ver exactamente qué cabeceras envía el navegador y qué responde el servidor. Puedes acceder a ellas desde el panel para desarrolladores (F12), panel de red.
    – abulafia
    el 13 feb. 2019 a las 11:42
  • Hola @abulafia, he añadido las cabezeras a ver si eso ayuda un poco a entender el problema. Una solución sería mandar la imagen como texto directament y luego convertirla a imagen otra vez cuando la reciba el servidor, pero me gustaría entender por qué está pasando esto.
    – Pablo
    el 15 feb. 2019 a las 11:07
  • cambia la siguiente linea a esto : cors = CORS(app, resources={r"/api/*": {"origins": "*"}}) el 15 feb. 2019 a las 11:58
  • por curiosidad que es imageFile.type el 15 feb. 2019 a las 12:03
  • Hola @JackNavaRow perdona que haya tardado tiempo en contestar. Voy a probarlo y te digo. imageFile.type es simplemente el string "image/jpeg"
    – Pablo
    el 17 feb. 2019 a las 17:51

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.