Axios error when doing a POST request of a .txt file

题意：在利用Axios发送.txt文件的POST请求时出现的错误


问题背景：

I am working on a project with Flask and React and more specifically, right now I am working on an API endpoint that has the utility of receiving a .txt file from the frontend, and then it would run a script that analyzes data from that .txt and saves plots related to the analysis.
我正在利用Flask和React开发一个项目，更详细地说，现在我正在处理一个API端点，它的功能是从前端接收一个.txt文件，然后运行一个脚本来分析该.txt中的数据，并生存与分析相关的图表。

Here is the API endpoint at the backend:
后端的API端点如下：

1. @analysis_ns.route('/upload', methods=["POST", "GET"])
2. class ChatAnalysisUploadResource(Resource):
3.     def get(self):
4.         return {"message": "This endpoint is only for file uploads via POST."}, 405
6.     #@jwt_required()
7.     def post(self):
8.         """Upload a chat file, process it and return the image URLs"""
9.         try:
10.             if 'file' not in request.files:
11.                 abort(400, description="No file part")
13.             file = request.files['file']
15.             if file.filename == '':
16.                 abort(400, description="No selected file")
18.             if file and allowed_file(file.filename):
19.                 filename = secure_filename(file.filename)
20.                 file_path = os.path.join(UPLOAD_FOLDER, filename)
21.                 file.save(file_path)
23.                 # Procesa el archivo y genera las imágenes
24.                 process_chat_file(file_path)
26.                 image_paths = ['static/mensajes_enviados.png', 'static/emojis.png']
27.                 missing_images = [path for path in image_paths if not os.path.exists(path)]
29.                 if missing_images:
30.                     abort(500, description=f"Imagen no encontrada: {missing_images}")
32.                 image_urls = {
33.                     'urls': [
34.                         url_for('static', filename='mensajes_enviados.png', _external=True),
35.                         url_for('static', filename='emojis.png', _external=True)
36.                     ]
37.                 }
39.                 # Guardar los resultados en la base de datos
40.                 result_summary = ";".join(image_urls['urls'])
41.                 new_analysis = ChatAnalysisResults(
42.                     chat_name=filename,
43.                     result_summary=result_summary
44.                 )
45.                 new_analysis.save()
47.                 return jsonify(image_urls), 200
49.             abort(400, description="File type not allowed")
51.         # Captura el error y devuelve un mensaje serializable
52.         except Exception as e:
53.             return jsonify({"error": str(e)}), 500

复制代码

And here is the React component that handle the upload of the document (I am not very good at react):
这是处理文档上传的React组件（我对React不是很善于）：

1. import { useState } from 'react'
2. import PropTypes from 'prop-types'
3. import axios from 'axios'
4. import '../App.css'
6. function UploadForm({ setImages }) {
7.     const [file, setFile] = useState(null);
8.     const [response, setResponse] = useState('');
9.     const [loading, setLoading] = useState(false);
11.     const handleFileChange = (event) => {
12.         setFile(event.target.files[0]);
13.     };
15.     const handleUpload = async () => {
16.         if (!file) {
17.             alert("Please select a chat file to upload.");
18.             return;
19.         }
21.         const formData = new FormData()
22.         formData.append('file', file) // Cambiado de 'chat_file' a 'file'
24.         setLoading(true) // Inicia la animación de carga
25.         setImages([])   // Limpia los resultados anteriores
26.         setResponse('') // Opcional: limpia el mensaje de respuesta
28.         console.log('Loading started');
30.         try {
31.             const response = await axios.post('http://127.0.0.1:8080/analysis/upload', formData, {
32.                 headers: {
33.                     'Content-Type': 'multipart/form-data'
34.                 }
35.             });
37.             console.log('Response data:', response.data);
39.             setImages(response.data.urls);
40.             setResponse('Chat file analyzed successfully');
41.         } catch (error) {
42.             console.error('Error uploading the file:', error);
43.             setResponse('Error uploading the file: ' + (error.response ? error.response.data.error : error.message));
44.         } finally {
45.             setLoading(false); // Detiene la animación de carga independientemente del resultado
46.             console.log('Loading finished');
47.         }
48.     }
50.     return (
51.         <div className="upload-form">
52.             <input type="file" onChange={handleFileChange} accept=".txt" />
53.             <button onClick={handleUpload}>
54.                 {loading ? 'Analyzing' : 'Analyze Chat'}
55.             </button>
56.             {response && <p>{response}</p>}
57.             {loading && (
58.             <div className='loading'>
59.                 <div className='spinner'></div>
60.             </div>
61.             )}
62.         </div>
63.     )
64. }
66. UploadForm.propTypes = {
67.     setImages: PropTypes.func.isRequired,
68. }
70. export default UploadForm

复制代码

And this is the error that I am getting in the console:
这是我在控制台中遇到的错误信息：

Also the error that I can see on the VSCode Terminal is the following:
同时，我在VSCode终端中看到的错误如下：

1.   File "/opt/anaconda3/lib/python3.11/json/encoder.py", line 180, in default
2.     raise TypeError(f'Object of type {o.__class__.__name__} '
3. TypeError: Object of type Response is not JSON serializable

复制代码

All the API endpoints so far work correctly except for this one, I have been stuck with this problem for a week and I could use some help. If you need more info or want to see more parts/scripts of the project feel free to ask
到目前为止，所有的API端点都工作正常，除了这一个。我已经被这个问题困扰了一个星期，希望能得到一些资助。如果你需要更多信息大概想检察项目的其他部门/脚本，请随时告诉我



问题解决：

I can see there is a CORS policy error in your code. It arises because you are working on two different URLs, one for backend and one for frontend, and to resolve it you have to do changes in your flask code. Install flask_cors package and than import modules from it;
我看到你的代码中出现了CORS计谋错误。这是因为你正在利用两个不同的URL，一个用于后端，一个用于前端。为了解决这个问题，你需要在你的Flask代码中做一些更改。起首，你需要安装flask_cors包，然后从它里面导入模块；

1. from flask_cors import cross_origin  #for specific route
2. from flask_cors import CORS  #for whole app

复制代码

after importing
导入之后

1. analysis_ns = Flask(__name__)  #you might have done this in beginning your code
2. CORS(analysis_ns)  #for enabling CORS in whole app, define it at the beginning of your code
4. #rest of your code
6. @analysis_ns.route('/upload', methods=["POST", "GET"])
7. @cross_origin  #for enabling CORS in specific route
9. #rest of your code

复制代码

This might help to resolve the error. I had the CORS policy issue during my internship where I was working with same technology, that is, Flask and React.
这可能有助于解决错误。在我练习期间，我也在利用雷同的技术（即Flask和React）时遇到了CORS计谋问题。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。