LingBot-Vision 在前端项目中调用视觉 API 的跨域处理

LingBot-Vision 在前端页面里直接调用视觉 API，遇到跨域是常见的浏览器行为，不是组件失效。只要前端域名和视觉 API 域名不一致，浏览器就会先发送预检请求；视觉 API 没有返回允许跨域的响应头时，LingBot-Vision 拿不到数据。处理时要分两段走：开发环境用 dev server 代理，本地先把请求转发到视觉 API；部署后改由自己的后端或网关转发，视觉 API 的密钥也放在服务端。先按这个顺序排查，通常能解决大多数前端跨域报错。

判断：如果 LingBot-Vision 的请求报错信息包含 'CORS' 或 'Access-Control-Allow-Origin'，说明请求根本没走到视觉 API 业务逻辑。正确做法是开发环境配置本地代理，生产环境用后端转发，不要把 API 密钥写在前端代码里。只要视觉 API 地址本身可达，这两个方案可以覆盖大部分场景。

先确认报错类型

打开浏览器开发者工具的 Console 和 Network 面板，查看具体请求。若看到类似 'No 'Access-Control-Allow-Origin' header is present' 的内容，就能确定是 CORS 拦截；如果请求根本没发出，或返回 4xx/5xx，则是地址、密钥或参数问题，和跨域无关。LingBot-Vision 通常只是按照配置发送 fetch 请求，可以先把它替换成下面这段最小请求，确认同样报错时，再继续处理代理。

fetch('https://api.example.com/vision/analyze', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: JSON.stringify({ image: 'BASE64_IMAGE' })
})

这段代码会造成预检请求，因为 Content-Type 和 Authorization 头都不是简单请求允许的字段，所以要观察 Network 里是否有 OPTIONS 请求。若 OPTIONS 请求本身返回 2xx，但后续 POST 被拦截，仍属于 CORS 响应头缺失。

开发环境代理

前端开发时最直接的做法是让本地的 dev server 承担代理。Vite 项目在 vite.config.js 中增加代理设置：

// vite.config.js
export default {
  server: {
    proxy: {
      '/vision-api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/vision-api/, '')
      }
    }
  }
}

改动后，LingBot-Vision 里的 API 地址改成 '/vision-api/analyze'，页面仍请求本地 dev server；dev server 转发到真实视觉 API，浏览器看到的是同源响应，跨域自然消失。需要替换 target 为实际地址，并确认视觉 API 所在环境允许该代理服务访问。Webpack 项目可以在 devServer.proxy 里使用类似规则，字段差别不大。

生产环境走后端转发

上线后如果继续用前端直连视觉 API，一方面跨域依赖对方配置，另一方面 API 密钥会暴露在浏览器里。更稳妥的处理是在自己的服务端增加一个转发接口，例如用 Express 实现：

app.post('/api/vision', async (req, res) => {
  const upstream = 'https://api.example.com/vision/analyze';
  const upstreamRes = await fetch(upstream, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + process.env.VISION_API_KEY
    },
    body: JSON.stringify(req.body)
  });
  const data = await upstreamRes.json();
  res.status(upstreamRes.status).json(data);
})

这段代码把视觉 API 的地址和密钥放在服务端，前端只请求 '/api/vision'，浏览器认为请求同源，不会有 CORS 问题。需要注意处理请求体大小、超时和错误格式，不同视觉 API 的返回结构也可能不同，需要结合具体接口调整。若公司已有 Nginx 或 API 网关，也可以在网关层配置转发；但密钥仍然建议由网关或后端注入，不要按前端明文方式传递。

验证清单

在 Console 中确认报错是否包含 CORS 或 Access-Control-Allow-Origin 关键字。
使用最小 fetch 请求复现，确认不是 LingBot-Vision 参数拼写问题。
检查开发代理的 '/' 前缀和 rewrite 路径是否与页面请求地址匹配。
部署后端转发后用 curl 从服务器或本机模拟请求，确认返回结构一致。
搜索前端代码，确认没有出现视觉 API 明文密钥。

按这个流程处理，LingBot-Vision 的跨域报错通常能被定位到具体环节。如果代理和后端转发都配置正确但仍然失败，下一步应检查视觉 API 的防火墙规则、套餐余量或网络出口 IP，这些都不属于 CORS 范围。