使用Pledge捐赠API遇CORS错误：Access-Control-Allow-Origin缺失

你的问题并非前端请求头配置遗漏，核心原因在于浏览器的CORS安全机制与Postman的请求模式差异，以及Pledge API的跨域配置限制。

为什么Postman能正常运行？ #

Postman是独立的客户端工具，不遵循浏览器的CORS规则：它不会自动发送OPTIONS预检请求，也不会校验响应头中的Access-Control-Allow-Origin字段，因此能直接拿到API响应。

为什么浏览器会拦截请求？ #

当你从前端页面（比如http://localhost:3000或你的生产域名）发起跨域请求时，浏览器会先发送一个OPTIONS预检请求到Pledge API服务器，检查服务器是否允许当前域名的跨域访问。如果服务器没有返回正确的CORS响应头（比如Access-Control-Allow-Origin、Access-Control-Allow-Headers等），浏览器就会触发拦截，抛出你看到的错误。

你的情况中，响应缺失Access-Control-Allow-Origin头，说明Pledge API服务器没有配置允许你的前端域名进行跨域访问。

你的前端代码是否有问题？ #

从代码来看，你严格遵循了API文档要求：使用GET方法，只携带了Authorization请求头，没有配置错误。

解决方案 #

1. 联系Pledge API官方配置CORS

直接联系Pledge的技术支持团队，请求他们将你的前端域名添加到CORS允许列表中，确保服务器返回以下响应头：

• Access-Control-Allow-Origin: 你的前端域名（生产环境推荐指定域名，而非通配符*）
• Access-Control-Allow-Headers: Authorization（允许携带Authorization头）
• 同时确保服务器能正确处理OPTIONS预检请求

2. 搭建后端代理（快速解决临时问题）

在你的后端服务器上发起对Pledge API的请求，前端页面请求自己的后端接口，绕开浏览器的CORS限制。以下是一个Node.js/Express的代理示例：

// 后端代理代码（Node.js + Express）
const express = require('express');
const fetch = require('node-fetch');
const app = express();

// 代理接口
app.get('/api/pledge-donations', async (req, res) => {
  const apiKey = '你的Pledge API密钥';
  try {
    const response = await fetch('https://api.pledge.to/v1/donations', {
      headers: {
        'Authorization': `Bearer ${apiKey}`
      }
    });
    const data = await response.json();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

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

修改前端代码，请求自己的代理接口：

const endpoint = 'http://localhost:3001/api/pledge-donations';

function handleClick(e){
    e.preventDefault();
    fetch(endpoint, { method: 'GET' })
      .then(response => response.json())
      .then(jsonResponse => console.log(jsonResponse))
      .catch(error => console.log("请求出错>>>>", error));
}

submitBtn.addEventListener('click', handleClick);

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