### 解决 Vue3 和 Flask 在 Post 请求中加入 `application/x-www-form-urlencoded` 后出现 415 错误的问题 当在 Vue3 中使用 Axios 发送 Post 请求，并设置请求头为 `application/x-www-form-urlencoded` 时，如果后端 Flask 没有正确配置解析逻辑，可能会返回 HTTP 状态码 415（Unsupported Media Type），表示服务器不支持或无法处理该请求的媒体类型[^1]。 以下是解决此问题的具体方法： #### 前端代码调整 在 Vue3 中，可以通过 Axios 设置请求头为 `application/x-www-form-urlencoded` 并发送数据。以下是一个示例代码： ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:5000', // 后端接口地址 timeout: 5000, headers: { 'Content-Type': 'application/x-www-form-urlencoded' // 设置请求头 } }); // 发送Post请求 instance.post('/api/test', new URLSearchParams({ param1: 'value1', param2: 'value2' })) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 上述代码中，通过 `new URLSearchParams()` 方法将对象转换为 URL 编码格式的数据，确保后端能够正确解析[^1]。 #### 后端 Flask 配置 Flask 默认情况下无法直接解析 `application/x-www-form-urlencoded` 格式的请求数据。需要通过 `request.form` 来获取表单数据。以下是一个示例代码： ```python from flask import Flask, request app = Flask(__name__) @app.route('/api/test', methods=['POST']) def test(): param1 = request.form.get('param1') # 获取表单参数 param2 = request.form.get('param2') return {'result': f'Param1: {param1}, Param2: {param2}'} ``` 如果未正确配置后端解析逻辑，Flask 可能会返回 415 错误，因为默认情况下它无法识别非 JSON 格式的请求数据[^1]。 #### 跨域问题处理 如果项目涉及跨域请求，推荐使用 `flask_cors` 包来解决跨域问题。安装并配置如下： - 安装 `flask_cors`： ```bash pip install flask_cors ``` - 在 Flask 应用中引入并配置 `CORS`： ```python from flask import Flask, request from flask_cors import CORS app = Flask(__name__) CORS(app) # 允许所有来源的跨域请求 @app.route('/api/test', methods=['POST']) def test(): param1 = request.form.get('param1') # 获取表单参数 param2 = request.form.get('param2') return {'result': f'Param1: {param1}, Param2: {param2}'} ``` 通过上述配置，可以确保跨域请求能够正常传递参数[^2]。 #### 使用 Nginx 反向代理（可选） 在生产环境中，可以使用 Nginx 进行反向代理，从而避免跨域问题。Nginx 配置示例如下： ```nginx server { listen 80; server_name yourdomain.com; location /api/ { proxy_pass http://127.0.0.1:5000/; # Flask后端地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { root /path/to/dist; # Vue3打包后的dist目录 index index.html; } } ``` 通过上述配置，Nginx 将前端请求转发到 Flask 后端，从而避免跨域问题[^4]。 --- ###