前端Vue如何对接unet后端？跨域CORS配置实战教程

Ne0inhk

23 Mar 2026 — 8 min read

前端Vue如何对接unet后端？跨域CORS配置实战教程

1. 教程目标与背景

你是否正在开发一个前端项目，想要把真人照片一键变成卡通头像？最近很多开发者都在尝试用 UNet人像卡通化模型 实现这个功能。而科哥基于阿里达摩院的 DCT-Net 模型搭建了一个本地运行的 WebUI 工具，支持单图/批量处理、风格调节、高清输出等功能。

但问题来了：这个后端服务默认只在 localhost:7860 提供接口，而你的 Vue 项目通常运行在 localhost:8080 或 3000 端口上。这就导致了经典的“跨域问题”——浏览器直接报错：

Access to fetch at 'http://localhost:7860/predict' from origin 'http://localhost:8080' has been blocked by CORS policy.

本教程将手把手带你解决这个问题，教你如何让 Vue 前端顺利调用 UNet 后端 API，完成图片上传 → 卡通化处理 → 获取结果的完整流程。

无需高深理论，只要你会写基础的 Vue 和 JavaScript，就能跟着一步步打通前后端通信链路。

2. 理解当前服务架构

2.1 后端服务现状

科哥构建的这套人像卡通化系统是基于 Gradio 框架启动的 WebUI 服务，默认监听在：

http://localhost:7860

它提供了一个图形界面，也暴露了底层 API 接口（通常是 /predict 或 /run），允许外部程序通过 HTTP 请求提交图片并获取处理结果。

但我们无法直接从 Vue 发请求过去，因为：

不同端口 = 跨域
后端未启用 CORS 支持 = 浏览器拦截

2.2 前端期望的工作流

我们希望实现这样的交互逻辑：

Vue前端 (http://localhost:8080) ↓ 上传图片 调用后端API (http://localhost:7860/predict) ↓ 返回base64或文件路径 显示卡通化结果 + 提供下载

要达成这一目标，关键在于打通跨域限制。

3. 解决方案选择：三种常见方式对比

方式	是否推荐	说明
开发服务器代理（vue.config.js）	✅ 推荐新手	利用 Vue CLI 内置代理转发请求
修改后端启用 CORS	✅ 推荐生产环境	直接在 Python 服务中开启跨域支持
使用 Nginx 反向代理	⚠️ 进阶可用	更稳定，适合部署上线

我们先从最简单的方式开始：Vue 开发服务器代理。

4. 方法一：Vue开发服务器代理（适合本地调试）

如果你使用的是 Vue CLI 创建的项目（@vue/cli-service），可以通过修改 vue.config.js 文件来设置代理。

4.1 创建 vue.config.js

在项目根目录下创建文件：

// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:7860', changeOrigin: true, pathRewrite: { '^/api': '' // 把 /api 替换为空，转发到根路径 } } } } }

注意：修改后需要重启 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。

假设它是基于 Gradio 构建的，典型结构如下：

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)

5.2 添加CORS支持

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

demo.launch( server_name="0.0.0.0", server_port=7860, enable_cors=True # 允许跨域请求 )

或者更精细地控制来源：

from fastapi import FastAPI import gradio as gr app = FastAPI() @ app.get("/") def read_root(): return {"status": "running"} demo = gr.Interface(fn=cartoonize, inputs="image", outputs="image") demo.queue().launch( app=app, server_name="0.0.0.0", server_port=7860, allowed_paths=["./"], app_kwargs={"title": "人像卡通化"} )

再配合 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 重启服务验证

执行：

/bin/bash /root/run.sh

确保服务重新加载了新配置。

然后在 Vue 中直接请求真实地址：

const response = await axios.post('http://localhost:7860/predict', formData, { headers: { 'Content-Type': 'multipart/form-data' } })

此时不会再出现跨域错误。

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

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（某些封装版本）

建议先打开 http://localhost:7860，右键检查页面源码，搜索 "api" 或 "predict" 查看真实路径。

也可以用浏览器开发者工具，在 WebUI 点击“转换”时观察 Network 面板发出的请求。

7.2 数据格式匹配

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

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

所以你可能需要这样组织数据：

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

而不是直接传 FormData。

具体要看后端接受什么格式，可通过抓包确定。

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> <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 人像卡通化后端服务，重点解决了跨域问题。

我们介绍了三种实用方案：

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

无论你是刚入门的新手还是有经验的开发者，都可以根据自己的场景选择合适的方法。

只要后端服务正常运行，前端正确发送请求，就能轻松实现“上传照片 → 卡通化 → 展示结果”的完整流程。

下一步你可以继续优化体验，比如增加进度条、支持拖拽上传、预览原始图与结果对比等。

AI 正在改变创意表达的方式，而掌握前后端联调能力，是你驾驭这些工具的关键一步。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 ZEEKLOG星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。

前端Vue如何对接unet后端？跨域CORS配置实战教程

Ne0inhk