[Python] 404 Error on POST Request to /api/read-excel - Endpoint Not Found

Title:
404 Error When Uploading Excel File via POST Request in Flask + Vue.js Project

Body:

I’m working on a project with Flask as the backend and Vue.js as the frontend, where the goal is to upload an Excel file, parse it on the backend, and display the results on the frontend. I’ve encountered a 404 NOT FOUND error when trying to upload an Excel file via a POST request to the endpoint http://localhost:5000/api/read-excel.

Frontend Code (Vue.js):


Here is the relevant part of my frontend code in DisasterCodeReader.vue:

<template>
<div class="disaster-reader">
<a-upload
:customRequest="handleExcelUpload"
:showUploadList="false"
accept=".xlsx,.xls"
>
<a-button :loading="excelLoading">
<template #icon><upload-outlined /></template>
Select Excel File
</a-button>
</a-upload>
</div>
</template>

<script setup>
import axios from 'axios'

const handleExcelUpload = async ({ file }) => {
try {
const formData = new FormData();
formData.append('file', file);

const response = await axios.post('http://localhost:5000/api/read-excel', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});

console.log(response.data);
} catch (error) {
console.error('Upload error:', error);
}
};
</script>

Backend Code (Flask):


Here’s the backend code that handles the file upload in api.py:

@bp.route('/read-excel', methods=['POST'])
def upload_excel_disaster():
try:
# Check if the file is uploaded
if 'file' not in request.files:
return jsonify({'success': False, 'message': 'No file uploaded'}), 400

file = request.files['file']
if file.filename == '':
return jsonify({'success': False, 'message': 'No file selected'}), 400

if not file.filename.endswith(('.xls', '.xlsx')):
return jsonify({'success': False, 'message': 'Only Excel files are supported'}), 400

# Save and parse the file (omitting the actual logic for brevity)
return jsonify({'success': True, 'message': 'File uploaded successfully'})
except Exception as e:
return jsonify({'success': False, 'message': str(e)}), 500

CORS Configuration:


I’ve also configured CORS in __init__.py to allow the frontend to access the backend:

CORS(app, resources={r"/api/*": {"origins": ["http://localhost:5173"]}})

Issue:


When I try to upload the Excel file, I get the following error in the browser’s console:

POST http://localhost:5000/api/read-excel 404 (NOT FOUND)


I tested the backend with Postman, and as you can see below, the POST request runs incorrectly:

enter image description here

What I’ve Tried:

• Checked the URL and route for correctness.
• Verified that the backend server is running on localhost:5000.
• Confirmed that CORS is properly configured.
• Tried using Postman, which works fine.

What I’m Looking For:


I am trying to get the Excel file upload and parsing functionality to work with the frontend. Could anyone point out what might be causing this 404 error or suggest how I can fix this?

enter image description here

Thank you for your help!

Continue reading...