ManusAI部署后出现跨域访问错误该如何修复【前端】-人工智能-PHP中文网

必须配置开发服务器代理或改用websocket/https解决cors问题：①在vite.config.ts中配置proxy将/api转发至manusai后端地址；②前端请求使用/api前缀；③若支持websocket则直接连接ws://；④局域网ip需用mkcert生成https证书并启用安全上下文。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

manusai部署后出现跨域访问错误该如何修复【前端】

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));```