Отправить данные формы из функции отправки дескриптора React в API Python?
Я новичок в React и Python и просто пытаюсь сделать простой пост из формы реагирования на мой API Python, который будет взаимодействовать с mongoDB. У меня есть форма в реакции, которая вызывает функцию handleSubmit при отправке. Я хочу, чтобы функция handleSubmit отправляла POST в мой Python API, работающий на порту 5000. Мое приложение для реагирования работает на порту 8080.
HandleSubmit выглядит так:
handleSubmit(event) {
const axios = require('axios');
const baseUrl = 'http://localhost:5000'
axios.post('http://localhost:5000/api/create', JSON.stringify(params))
.end((error, response) => {
if (!error && response) {
console.info('got a valid response from the server')
} else {
console.info(`Error fetching data from the server: `, error)
}
});
event.preventDefault();
}
Код конечной точки Python:
@app.route('/api/create', methods=['POST'])
def create(self):
if request.method == 'POST':
print(request.args.get('exp_title'))
return True
return False
Когда я нажимаю кнопку, моя конечная точка API Python не достигается, потому что реакция пытается опубликовать маршрут на порту 8080. Что мне не хватает?
Я пробовал использовать обычный вызов ajax и получил тот же результат. В какой-то момент я что-то сделал и получил ошибку CORS в браузере, но я не могу вспомнить, как я это сделал.
Ответы 1
Чтобы включить cors, вам нужно установить pip install -U flask-cors, вот сайт: https://flask-cors.readthedocs.io/en/latest/ или вы можете определить cors в прокси в вашем пакете responsejs.json, как здесь: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development
После того, как вы установите cors в свое приложение Python, попробуйте следующее: Приложение Python:
@app.route('/api/', methods=['POST', 'GET'])
def api_post():
if request.method == 'POST':
print('post app')
req = request.json
print(req)
return jsonify(name='john')
Реагировать приложение:
function App() {
const [todos, setTodos] = useState(null);
const [value, setValue] = useState('');
function handleSubmit(e) {
e.preventDefault();
const data = { name: value };
console.info('submit');
console.info(value);
fetch('http://127.0.0.1:5000/api/', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify(data),
})
.then(res => res.json())
.then(res => console.info(res));
}
function handleValue(e) {
setValue(e.target.value);
}
return (
<section id = "app">
<form action = "" onSubmit = {handleSubmit}>
<input type = "text" onChange = {handleValue} />
<button> submit </button>
</form>
</section>
);
}
render(<App />, document.querySelector('#root'));
Хотя это хороший пример с flask API, я искал решение с быстрым API. Я добавил настройки CORS отсюда: fastapi.tiangolo.com/tutorial/cors, но все равно выдает ошибку CORS.
Ваш комментарий дал мне хорошее место, чтобы начать решать проблему. В итоге я использовал выборку, как в вашем примере, и добавил значения заголовков, чтобы решить проблему CORS.