3

Tenho duas aplicações Flask sendo executadas localmente na minha máquina. Uma está rodando na porta 5000 e a outra na porta 5050. Eu preciso fazer uma chamada da aplicação 5000 para a 5050. Porém estou tendo este problema:

Access to XMLHttpRequest at 'http://localhost:5050/run' from origin 'http://127.0.0.1:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

A chamada até ocorre na aplicação rodando na porta 5050, porém os dados não são passados e acaba dando um INTERNAL SERVER ERROR na aplicação 5050.

Este é o código que faz a chamada:

$.post('http://localhost:5050/run', {
  id: 'test',
  command: 'echo michael'
}, function (data) {
  console.log(data)
});

Este é o código da aplicação 5050:

import logging

from flask import Flask, json
from flask import request
from flask_cors import CORS

from task_executor import execute_task

app = Flask(__name__)
cors = CORS(app)
logging.getLogger('flask_cors').level = logging.DEBUG


@app.route('/check', methods=['GET'])
def hello():
    response = app.response_class(
        response="Server is running!",
        status=200,
        mimetype='text/plain',
    )
    return response


@app.route('/run', methods=['POST'])
def post():
    task_info = request.get_json()
    print(task_info)
    task_output = execute_task(task_info)
    response = app.response_class(
        response=json.dumps(task_output),
        status=200,
        mimetype='application/json'
    )
    response.headers['Access-Control-Allow-Origin'] = '*'
    return response


if __name__ == '__main__':
    app.run(debug=True, host='localhost', port=5050)

Já pesquisei sobre esse erro no google e até mesmo no próprio stack overflow, mas nenhuma das soluções funcionou para mim.

Seguem alguns links que pesquisei:

  1. https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present
  2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. - Phonegap
  3. https://flask-cors.readthedocs.io/en/latest/
  4. https://stackoverflow.com/questions/30717152/python-flask-how-to-set-response-header-for-all-responses

Obs: Não quero ter que usar nenhuma extensão e nem executar o navegador com alguma flag!


EDIT:

O seguinte código dá erro 400 (BAD REQUEST)

$.ajax('http://127.0.0.1:5050/run', {
  contentType: 'application/json',
  crossDomain: true,
  data: {id: 'test', command: 'echo hello'},
  method: 'POST'
})
10
  • Caro Micheal basta entender o que o erro diz, o endereço http://localhost:5050 é diferente de http://127.0.0.1:5000, logo não pode acessar diretamente via Ajax pq isso implicaria em falha de segurança, a unica maneira de permitir o acesso é no Flask que esta rodando a porta 5050 adicionar o HEADER, exemplo: gist.github.com/brcontainer/21956e354c64d514402f13e49c9913c1 .. Recomendo que leia pt.stackoverflow.com/a/145493/3635 para entender o que significa este erro. Se tiver mais alguma duvida pode comentar aqui.
    – Syzoth
    Commented 8/04/2019 às 0:25
  • Já fiz isso. Alterei a pergunta com o código da aplicação. Ainda não funciona. Commented 8/04/2019 às 0:31
  • Então mas a mensagem traduzida de No 'Access-Control-Allow-Origin' header is present on the requested resource. afirma Access-Control-Allow-Origin header não esta presente no recurso requisitado, ou você não reiniciou o Flask, ou você confundiu algo. Tenta reiniciar o Flask e rodar o endereço http://127.0.0.1:5000 em uma janela privada. Tenta a forma do código que lhe enviei também
    – Syzoth
    Commented 8/04/2019 às 0:35
  • 1
    Deve ser o content-type, o Flask deve estar rejeitando, porque a rota não esta escrita para receber o tal tipo de inforamação, vou criar o ambiente flask aqui e te mando um feedback
    – Syzoth
    Commented 8/04/2019 às 0:51
  • 2
    Caro Micheal, o postman não é uma página web, logo não existe problemas de segurança e por isto não vai causar falhas e bloqueios
    – Syzoth
    Commented 8/04/2019 às 1:14

2 Respostas 2

6

Encontrei a resposta. Era simplesmente porque o campo data era um objeto javascript. Na documentação diz que data pode ser um PlainObject ou String ou Array, portanto não sei porque não funcionou.

Esse código está funcionando:

$.ajax({
    url: 'http://localhost:5050/run',
    contentType: 'application/json',
    cache: false,
    method: 'POST',
    dataType: 'json',
    data: JSON.stringify({
        id: 'test',
        command: 'echo michael'
    }),
    success: function(data) {
        console.log(data);
    }
});
-3

Do lado do meu servidor que está rodando na porta 8080, usei no controller a seguinte anotação com Spring:

@RequestMapping("/categorias")

@CrossOrigin(origins = "http://localhost:8100")

public class CategoriaController {...}

"import org.springframework.web.bind.annotation.*;"

Pois meu front está rodando na porta 8100 (Ionic) dessa forma funcionou aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .