前端 Vue 对接 UNet 后端：跨域 CORS 配置方案

注意：修改后需要重启 npm run serve 才能生效。

4.2 在 Vue 中发起请求

现在可以通过 /api/predict 访问原本的 http://localhost:7860/predict 接口。

示例代码（使用 axios）：

// App.vue 或组件中
import axios from 'axios'

export default {
  methods: {
    async convertImage(file) {
      const formData = new FormData()
      formData.append('image', file)
      try {
        const response = await axios.post('/api/predict', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        // 假设返回的是 base64 图片数据
        this.resultImage = 'data:image/png;base64,' + response.data.output_image
      } catch (error) {
        console.error('转换失败:', error)
        alert('调用后端失败，请检查服务是否运行')
      }
    }
  }
}

4.3 验证是否成功

打开浏览器开发者工具 Network 面板：

• 请求地址应为：http://localhost:8080/api/predict
• 实际被代理到：http://localhost:7860/predict
• 如果看到返回图片数据，说明代理成功！

✅ 优点：无需改后端，零成本接入 ❌ 缺点：仅限开发环境，打包后无效

5. 方法二：修改后端启用 CORS（推荐长期使用）

更根本的解决方案是在 UNet 后端服务中开启 CORS 支持。

5.1 找到启动脚本

服务通常由以下命令启动：

/bin/bash /root/run.sh

我们需要找到调用的 Python 文件，通常是 app.py 或 gradio_app.py。

5.2 添加 CORS 支持

只需在 launch() 中加入 enable_cors=True 参数即可：

import gradio as gr

def cartoonize(img):
    # 模型推理逻辑
    return result_img

demo = gr.Interface(fn=cartoonize, inputs="image", outputs="image")
demo.launch(
    server_name="0.0.0.0",
    server_port=7860,
    enable_cors=True # 允许跨域请求
)

或者配合 FastAPI 的 CORS 中间件：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:8080"], # 明确允许前端域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

5.3 重启服务验证

执行启动脚本确保服务重新加载新配置。然后在 Vue 中直接请求真实地址，不再出现跨域错误。

✅ 优点：一劳永逸，支持任意前端 ❌ 缺点：需修改后端代码，有一定风险

6. 方法三：Nginx 反向代理（适合生产部署）

项目上线时，建议使用 Nginx 统一管理前后端入口。

6.1 配置示例

server {
    listen 80;
    server_name yourdomain.com;

    # 前端静态资源
    location / {
        root /var/www/vue-app;
        try_files $uri $uri/ /index.html;
    }

    # 代理后端 API
    location /unet-api/ {
        rewrite ^/unet-api/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:7860;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

6.2 前端调用方式

await axios.post('/unet-api/predict', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

所有请求都会被 Nginx 自动转发到本地 7860 端口。

✅ 优点：安全、统一入口、便于部署 ❌ 缺点：需要服务器权限，配置稍复杂

7. 实际对接中的注意事项

7.1 接口路径确认

Gradio 默认的预测接口可能是：

• /api/predict（新版）
• /run（旧版）
• /predict（某些封装版本）

建议先打开 WebUI 页面，右键检查源码或使用开发者工具观察 Network 面板发出的请求。

7.2 数据格式匹配

Gradio 接口通常接收 JSON 格式，例如：

{
  "data": ["data:image/jpeg;base64,/9j/4AAQSk..."]
}

可能需要这样组织数据：

const payload = { data: [base64String] }
axios.post('/api/predict', payload)

具体要看后端接受什么格式。

7.3 处理响应数据

成功响应一般包含 base64 编码的图片：

{
  "data": ["data:image/png;base64,iVBORw..."]
}

前端可以直接赋值给 <img :src="result"> 显示。

7.4 错误处理建议

添加完善的错误捕获机制：

try {
  const res = await axios.post('/api/predict', payload)
  if (res.data && res.data.data) {
    this.result = res.data.data[0]
  } else {
    throw new Error('无效响应')
  }
} catch (err) {
  if (err.response?.status === 500) {
    alert('后端处理出错')
  } else if (err.code === 'ECONNREFUSED') {
    alert('请先启动后端服务')
  } else {
    alert('未知错误：' + err.message)
  }
}

8. 完整 Vue 组件示例

<template>
  <div class="container">
    <h2>人像卡通化</h2>
    <input type="file" @change="handleFile" accept="image/*" />
    <button @click="convert" :disabled="!image">开始转换</button>
    <div v-if="loading">处理中...</div>
    <img v-if="result" :src="result" alt="卡通化结果" />
    <a v-if="result" :href="result" download="cartoon.png">下载结果</a>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      image: null,
      result: null,
      loading: false
    }
  },
  methods: {
    handleFile(e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = () => {
        this.image = reader.result
      }
      reader.readAsDataURL(file)
    },
    async convert() {
      if (!this.image) return
      this.loading = true
      try {
        const response = await axios.post('/api/predict', { data: [this.image] })
        if (response.data?.data?.[0]) {
          this.result = response.data.data[0]
        } else {
          alert('转换失败：无返回数据')
        }
      } catch (error) {
        console.error(error)
        alert('调用失败，请检查后端是否运行')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style>
.container { padding: 20px; }
img { max-width: 100%; margin-top: 20px; }
</style>

9. 总结

本文详细讲解了如何让 Vue 前端成功对接 UNet 人像卡通化后端服务，重点解决了跨域问题。

介绍了三种实用方案：

1. Vue 代理模式：适合快速开发调试，无需改动后端；
2. 启用 CORS：从根本上解决问题，推荐长期使用；
3. Nginx 反向代理：适合生产环境，统一入口更安全。

只要后端服务正常运行，前端正确发送请求，就能轻松实现'上传照片 → 卡通化 → 展示结果'的完整流程。下一步可继续优化体验，比如增加进度条、支持拖拽上传等。