嘿，我刚碰到过几乎一模一样的问题，给你捋捋怎么解决！

首先得搞懂为啥会出现这个错误：Google Vision API不支持直接从浏览器前端发起跨域请求——它的服务器没有配置允许你的前端Origin（尤其是你本地打开HTML文件时，Origin是null，这种情况几乎不可能被允许）。而且你说的403状态码，大概率还和API密钥的访问限制有关。

你之前尝试在请求里加Access-Control-Allow-Origin头是没用的，因为这个头是服务器要返回给浏览器的响应头，不是前端发请求时带的！浏览器的CORS机制是先发送OPTIONS预请求，看服务器允许哪些Origin、方法，只有服务器返回了对应的允许头，浏览器才会继续发实际请求。Google的服务器没给你返回这个头，所以直接被拦截了。

下面给你两个最靠谱的解决方案：

方案一：用后端做代理（推荐） #

核心思路是：前端调用你自己的后端接口，后端再去调用Google Vision API。因为后端和API之间没有跨域限制（跨域是浏览器的安全机制，服务器之间不受影响），完美绕过CORS问题。

举个简单的Node.js代理示例（用Express和Axios）：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

// 解析JSON请求体
app.use(express.json());

// 允许前端跨域访问你的后端（生产环境要改成具体域名，别用*）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 代理Google Vision API的接口
app.post('/api/vision', async (req, res) => {
  try {
    const apiKey = '你的Google API密钥';
    const visionResponse = await axios.post(
      `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`,
      req.body
    );
    res.json(visionResponse.data);
  } catch (error) {
    const statusCode = error.response?.status || 500;
    const errorData = error.response?.data || { message: '请求Vision API失败' };
    res.status(statusCode).json(errorData);
  }
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`代理服务器跑在http://localhost:${PORT}啦`);
});

然后前端就调用你自己的代理接口，而不是直接调用Google的API：

// 前端Ajax请求示例（用fetch）
fetch('http://localhost:3000/api/vision', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    requests: [
      {
        image: { content: '你的图片base64编码内容' },
        features: [{ type: 'LABEL_DETECTION', maxResults: 5 }]
      }
    ]
  })
})
.then(res => res.json())
.then(result => console.log('Vision API返回结果:', result))
.catch(err => console.error('请求出错:', err));

方案二：检查并调整API密钥的限制 #

如果暂时不想写后端，先去Google Cloud Console检查你的API密钥配置：

• 打开API密钥管理页面，找到你的Vision API密钥
• 看「应用限制」部分：如果选的是「HTTP引用网站（网站）」，要确保添加了你的前端域名（本地开发的话，http://localhost:xxxx这种）；如果是本地打开HTML文件（Origin为null），这个限制是没法兼容的，只能暂时改成「无限制」（生产环境一定要改回来，避免密钥泄露）
• 还要确认「API限制」里已经勾选了「Cloud Vision API」，不然也会返回403

不过就算你调整了密钥限制，本地文件（Origin=null）还是大概率没法正常调用，所以还是方案一最稳妥。

内容的提问来源于stack exchange，提问作者Sanket Dange