Python机器学习模型请求代码转Axios+Vue及CORS问题排查

一、正确的Vue+Axios代码实现 #

先贴出对应功能的原Python请求代码示例：

import requests

# 模型端点地址
endpoint_url = "https://your-model-endpoint.com/predict"
# 请求体数据
request_data = {"input": [0.1, 0.2, 0.3]}
# 请求头
headers = {"Content-Type": "application/json"}

try:
    response = requests.post(endpoint_url, json=request_data, headers=headers)
    response.raise_for_status()
    print("模型响应:", response.json())
except requests.exceptions.RequestException as e:
    print("请求出错:", str(e))

对应的Vue+Axios实现代码：

<template>
  <div>
    <button @click="callModelEndpoint">调用模型端点</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    async callModelEndpoint() {
      const endpointUrl = "https://your-model-endpoint.com/predict"
      const requestData = { input: [0.1, 0.2, 0.3] }
      const requestHeaders = { "Content-Type": "application/json" }

      try {
        const res = await axios.post(endpointUrl, requestData, { headers: requestHeaders })
        console.log("模型响应结果:", res.data)
      } catch (err) {
        console.error("请求失败:", err.response?.status ? `状态码: ${err.response.status}` : err.message)
      }
    }
  }
}
</script>

二、CORS跨域问题解决方法 #

CORS错误是浏览器同源策略的限制导致，核心是后端未允许前端域名的跨域请求，以下是可行的解决方式：

1. 后端配置CORS（推荐生产环境使用） #

让模型端点的服务端添加以下响应头：

• Access-Control-Allow-Origin: 你的前端域名（比如https://your-frontend.com，开发环境可临时用*，但生产环境不建议）
• Access-Control-Allow-Methods: POST
• Access-Control-Allow-Headers: Content-Type

如果模型用FastAPI/Flask搭建，可直接用对应框架的CORS插件配置：

• FastAPI示例：

  from fastapi import FastAPI
  from fastapi.middleware.cors import CORSMiddleware
  
  app = FastAPI()
  
  app.add_middleware(
      CORSMiddleware,
      allow_origins=["https://your-frontend.com"], # 允许的前端域名
      allow_methods=["POST"],
      allow_headers=["Content-Type"],
  )
  

2. 前端本地代理（仅开发环境临时使用） #

如果是Vue CLI创建的项目，在项目根目录的vue.config.js中添加代理配置：

module.exports = {
  devServer: {
    proxy: {
      '/model-api': {
        target: 'https://your-model-endpoint.com', // 模型端点地址
        changeOrigin: true,
        pathRewrite: { '^/model-api': '' } // 重写路径，去掉前缀
      }
    }
  }
}

之后前端请求地址改为代理路径：

const res = await axios.post('/model-api/predict', requestData, { headers: requestHeaders })

3. 反向代理服务（无法修改后端时的生产方案） #

自己搭建Node.js代理或用Nginx做反向代理，转发请求并添加CORS头。以Nginx为例，配置片段如下：

server {
  listen 80;
  server_name your-proxy-domain.com;

  location /predict {
    proxy_pass https://your-model-endpoint.com/predict;
    # 允许你的前端域名跨域
    add_header Access-Control-Allow-Origin https://your-frontend.com;
    add_header Access-Control-Allow-Methods POST;
    add_header Access-Control-Allow-Headers Content-Type;
  }
}

前端直接请求代理域名即可：https://your-proxy-domain.com/predict

内容的提问来源于stack exchange，提问作者Njita Arnaud