求助：Nuxt.js通过Axios无法向Flask部署的ML模型发送POST请求

1. 先搞定跨域问题（最常见的拦路虎） #

Flask默认不处理跨域请求，Nuxt一般跑在3000端口，访问5000端口的Flask会被浏览器拦截。

• 安装Flask-CORS：pip install flask-cors
• 在Flask代码里加跨域配置：

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

app = Flask(__name__)
# 开发环境允许所有域名，生产环境记得改成你的Nuxt域名
CORS(app)

# 你的ML模型预测路由示例
@app.route('/predict', methods=['POST'])
def predict():
    # 接收JSON格式的请求数据
    data = request.get_json()
    # 这里写你的模型预测逻辑
    prediction_result = {"result": "your_model_output"}
    return jsonify(prediction_result)

if __name__ == '__main__':
    app.run(debug=True)

2. 检查Nuxt.js的Axios请求配置 #

确保请求地址、数据格式和Flask端匹配：

• Nuxt 2里的请求示例：

async submitData() {
  try {
    const res = await this.$axios.post('http://127.0.0.1:5000/predict', {
      // 这里的键要和Flask端接收的字段对应
      input: "your_data_here"
    })
    console.log('模型返回结果:', res.data)
    // 这里写提取数据的逻辑
  } catch (err) {
    console.error('请求失败:', err.response?.data || err.message)
  }
}

• Nuxt 3可以用内置的useFetch：

const { data, error } = await useFetch('http://127.0.0.1:5000/predict', {
  method: 'POST',
  body: { input: "your_data_here" },
  headers: {
    'Content-Type': 'application/json'
  }
})
if (error.value) {
  console.error('请求出错:', error.value)
} else {
  console.log('拿到结果:', data.value)
}

3. 先验证Flask服务本身是否正常 #

别上来就调Nuxt，先直接测试Flask接口：

• 用curl命令测试：

curl -X POST http://127.0.0.1:5000/predict -H "Content-Type: application/json" -d '{"input": "test"}'

• 如果这个请求能返回正确结果，说明问题在Nuxt的请求配置；如果不行，先排查Flask的路由、模型加载是否有问题。

4. 其他可能的坑 #

• 端口冲突：确认Flask确实跑在5000端口，Nuxt在3000端口，没有被其他程序占用。
• 请求格式不匹配：如果Flask用request.form接收表单数据，Nuxt那边要改成发送FormData格式，而不是JSON。
• 生产环境推荐用Nuxt代理：在nuxt.config.js里配置代理，避免跨域同时隐藏后端地址：

export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    proxy: true
  },
  proxy: {
    '/api/': {
      target: 'http://127.0.0.1:5000',
      pathRewrite: { '^/api/': '' }
    }
  }
}

之后请求就可以写成this.$axios.post('/api/predict', ...)

相关截图 #

内容的提问来源于stack exchange，提问作者PIYUSH SONKAR