请求Google Contacts API获取联系人照片时遇CORS错误求助

嘿，这个CORS问题我之前对接Google API的时候也踩过坑！咱们先搞清楚为啥会出现这个错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access

这是浏览器的同源策略在搞事情——浏览器会限制前端页面从不同域名的服务器获取资源，除非目标服务器明确通过Access-Control-Allow-Origin头允许你的域名（也就是http://localhost:3000）访问。虽然这个Google Contacts API端点本身功能正常，但它没有配置允许你的本地开发域名跨域，所以浏览器直接拦截了请求（你用Postman/curl调用能成功就是因为这些工具不受同源策略限制）。

下面给你几个可行的解决方案：

1. 用后端代理转发请求（最可靠的方案） #

前端不要直接调用Google的API，而是先请求自己的后端服务，再由后端去调用Google的接口——后端请求不受同源策略限制。

举个Node.js + Express的代理例子：

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

// 代理路由，处理联系人照片请求
app.get('/proxy/contact-photo', async (req, res) => {
  try {
    const { userEmail, contactId } = req.query;
    const googleApiUrl = `https://www.google.com/m8/feeds/photos/media/${userEmail}/${contactId}`;
    
    // 记得带上授权头！如果你的请求需要OAuth token的话
    const response = await axios.get(googleApiUrl, {
      headers: {
        'Authorization': `Bearer ${req.headers.authorization.split(' ')[1]}`
      },
      responseType: 'stream' // 处理图片流
    });

    // 将Google的响应直接转发给前端
    response.data.pipe(res);
  } catch (error) {
    res.status(error.response?.status || 500).send(error.message);
  }
});

app.listen(4000, () => {
  console.log('代理服务器运行在 http://localhost:4000');
});

然后前端改成请求你的代理地址：

// 前端请求示例
const getContactPhoto = async (userEmail, contactId, token) => {
  const response = await fetch(`http://localhost:4000/proxy/contact-photo?userEmail=${userEmail}&contactId=${contactId}`, {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
  const blob = await response.blob();
  return URL.createObjectURL(blob);
};

2. 检查Google Cloud Console的OAuth配置（辅助步骤） #

确保你在Google Cloud Console中创建的OAuth 2.0客户端ID，已经把http://localhost:3000添加到授权JavaScript来源和授权重定向URI列表里。不过要注意：即使配置正确，有些Google API端点还是不支持直接前端跨域调用，所以代理方案依然是首选。

3. 确认请求携带正确的授权信息 #

虽然CORS错误本身和授权无关，但如果你的请求没有带上有效的OAuth 2.0令牌，后续拿到照片也会失败。确保请求头里包含Authorization: Bearer {your_access_token}，这个令牌需要有contacts.readonly或者相关的权限范围。

内容的提问来源于stack exchange，提问作者Abdul Wahed