Vue客户端调用Google Vision API遭遇CORS错误求助

嘿，这个问题我之前帮不少开发者排查过，核心原因其实很明确：Google Vision API本身就不支持直接从浏览器前端发起请求——这既是出于安全考量（防止你的API密钥被恶意盗用），也是官方CORS策略的限制导致的。

为什么会出现这个错误？ #

浏览器的同源策略会拦截跨域请求，而Google的这类服务端API并没有配置允许前端域名（比如你的https://localhost:3000）的CORS响应头。当你的前端发起请求时，浏览器会先发送一个OPTIONS预请求，发现返回的响应里没有Access-Control-Allow-Origin头，就直接触发了你看到的CORS拦截错误。

具体解决方案（按推荐优先级排序） #

1. 最稳妥：用自己的后端做代理中转

这是生产环境的标准做法，既解决CORS问题，又能保护你的API密钥不暴露在前端代码里。

• 思路：前端把图片数据发给你的后端服务器，由后端调用Google Vision API，再把结果返回给前端。
• 举个Node.js/Express后端的简单示例：

  // 后端路由代码（Express框架）
  const axios = require('axios');
  const express = require('express');
  const router = express.Router();
  
  router.post('/vision/annotate', async (req, res) => {
    try {
      // 后端直接调用Vision API
      const visionResponse = await axios.post(
        `https://vision.googleapis.com/v1/images:annotate?key=${process.env.GOOGLE_VISION_API_KEY}`,
        req.body
      );
      res.json(visionResponse.data);
    } catch (error) {
      res.status(error.response?.status || 500).json({ error: error.message });
    }
  });
  
  module.exports = router;
  

• 然后修改前端的请求代码，指向自己的后端接口：

  // Vue中的请求代码修改
  const gv = await this.$axios.$post(
    '/api/vision/annotate', // 你的后端代理接口
    googleRequestData
  );
  

• 本地调试时，还可以在Vue项目的vue.config.js里配置开发代理：

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:你的后端端口号',
          changeOrigin: true
        }
      }
    }
  };
  

2. 无服务器备选：用Google Cloud Functions/Cloud Run中转

如果不想维护自己的后端服务器，可以用Google的无服务器服务做中转，同时配置CORS允许你的前端域名访问：

• 举个Cloud Function的Node.js示例：

  const { ImageAnnotatorClient } = require('@google-cloud/vision');
  const client = new ImageAnnotatorClient();
  
  exports.annotateImage = async (req, res) => {
    // 配置CORS，允许你的前端域名
    res.set('Access-Control-Allow-Origin', 'https://localhost:3000');
    
    // 处理浏览器的OPTIONS预请求
    if (req.method === 'OPTIONS') {
      res.set('Access-Control-Allow-Methods', 'POST');
      res.set('Access-Control-Allow-Headers', 'Content-Type');
      res.set('Access-Control-Max-Age', '3600');
      res.status(204).send('');
      return;
    }
  
    try {
      const { requests } = req.body;
      const [response] = await client.batchAnnotateImages({ requests });
      res.json(response);
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  };
  

• 部署这个Function后，前端直接调用它的公开URL即可，不用再担心CORS问题，而且API密钥不会暴露（Cloud Function使用服务账号权限，无需在前端配置密钥）。

3. 临时调试方案（不推荐生产环境）

如果你只是想临时本地调试，可以在Google Cloud控制台给API密钥设置严格的使用限制，但注意这仍有被盗用风险：

• 步骤：Google Cloud控制台 → API和服务 → 凭据 → 找到你的API密钥 → 编辑
  • 应用限制：选择「HTTP referrers (web sites)」，添加https://localhost:3000/*
  • API限制：选择「限制密钥」，勾选「Cloud Vision API」
• 注意：即使设置了限制，Google仍可能不返回CORS头，这个方案不一定能解决问题，仅作临时调试用。

内容的提问来源于stack exchange，提问作者Ayeye Brazo