必须配置开发服务器代理或改用WebSocket/HTTPS解决CORS问题：①在vite.config.ts中配置proxy将/api转发至ManusAI后端地址；②前端请求使用/api前缀；③若支持WebSocket则直接连接ws://；④局域网IP需用mkcert生成HTTPS证书并启用安全上下文。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
ManusAI部署后前端页面调用其API时浏览器报错“CORS header ‘Access-Control-Allow-Origin’ missing”，说明请求被同源策略拦截，必须在前端工程中配置代理或调整请求方式才能正常通信。
使用开发服务器代理绕过跨域限制
适用于 Vue、React 等基于 Webpack DevServer 或 Vite 的本地开发环境，无需修改后端代码即可让前端请求走同源路径。
第一步：确认 ManusAI 后端服务地址，例如 【http://192.168.1.100:8000】（非 localhost，否则可能触发更严格的私有网络拦截）。
第二步：在项目根目录的 vite.config.ts（Vite）或 vue.config.js（Vue CLI）中添加 proxy 配置，将 /api 路径转发至 ManusAI 服务：
立即学习“前端免费学习笔记（深入）”；
```ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://192.168.1.100:8000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});```
注意：target 地址不能写成 localhost，否则代理会把请求发回本机而非目标服务器；若后端启用了 HTTPS，请务必改用 https:// 协议，否则代理会失败。
第三步：前端发起请求时统一使用 /api 开头的路径，例如 fetch('/api/v1/task') → 实际被代理到 http://192.168.1.100:8000/v1/task。
替换 fetch 为 WebSocket 连接（适用于长时交互场景）
当 ManusAI 提供了 WebSocket 接口（如 /ws），且你只需要实时接收响应、不依赖 HTTP 状态码或 Cookie 认证时，可完全规避 CORS。
方法一：直接新建 WebSocket 实例连接 ManusAI 的 ws 地址
```js
const ws = new WebSocket('ws://192.168.1.100:8000/ws');
ws.onopen = () => ws.send(JSON.stringify({ action: 'start', model: 'manus-pro' }));
ws.onmessage = (e) => console.log('收到:', JSON.parse(e.data));```
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法二：封装成 Promise 化调用，避免手动管理连接状态
这一步操作起来很简单，直接把文件拖进去就行。但必须确保 ManusAI 服务已启用 WebSocket 支持，否则连接会立即关闭并触发 onclose 事件。
强制启用安全上下文以解除私有地址空间拦截
当浏览器报错 “The request client is not a secure context” 且目标地址是局域网 IP（如 192.168.x.x）时，HTTP 页面会被拒绝发起请求——这是 Chrome/Edge 的硬性限制，必须解决。
① 使用 mkcert 工具为本地域名生成可信 HTTPS 证书：
```bash
mkcert -install
mkcert localhost 192.168.1.100```
② 启动前端开发服务器时加载证书：
Vite 用户在 package.json 中修改 scripts：
`"dev": "vite --https --cert localhost.pem --key localhost-key.pem"`
③ 将前端访问地址从 http://localhost:5173 改为 https://localhost:5173，并在 fetch 请求中显式指定 protocol：
```js
fetch('https://192.168.1.100:8000/api/status') // 注意这里必须用 https，否则仍被拦截```
【关键前提】 ManusAI 后端也必须支持 HTTPS，否则浏览器会因混合内容（HTTPS 页面加载 HTTP 资源）再次拦截。
