React.js用fetch调用Buffer API遇400错误及CORS问题求助

看起来你碰到了两个核心问题：请求格式不符合Buffer API的要求，以及前端直接请求带来的CORS和安全风险。让我一步步帮你理清解决方案：

1. 400错误的根源：请求体格式不对 #

Buffer的OAuth token接口（/1/oauth2/token.json）要求请求体采用**application/x-www-form-urlencoded**格式，而不是你代码里用的JSON格式。这就是为什么你会收到invalid_request错误——API无法解析JSON格式的grant_type参数。

如果你只是想先验证格式问题，可以临时修改fetch代码如下（注意这只能解决400，CORS问题依然存在）：

const queryString = require('query-string');
const parsed = queryString.parse(window.location.search);
const buffer_data = new URLSearchParams({
  client_id: BUFFER_CLIENT_ID,
  client_secret: BUFFER_CLIENT_SECRET,
  redirect_uri: BUFFER_CALLBACK_URL,
  code: parsed.code,
  grant_type: 'authorization_code',
});

fetch(BUFFER_ACCESS_TOKEN_URL, {
  method: 'post',
  body: buffer_data,
  // URLSearchParams会自动添加正确的Content-Type头，无需手动设置
}).then(data => {
  console.log('data response ', data);
  return data.json();
}).then(response => {
  console.log(response);
}).catch(err => {
  console.error('请求错误:', err);
});

2. 无法绕过的CORS问题：必须用后端代理 #

你看到的CORS错误本质上是因为Buffer的OAuth接口不允许前端浏览器直接请求，更关键的是：client_secret是绝对不能暴露在前端代码里的！一旦你把它写在React代码中，任何人都能通过浏览器开发者工具看到它，这会严重威胁你的应用安全。

你之前用PHP成功的原因就是PHP是后端代码，不会暴露敏感信息，而且后端请求不会有CORS限制。正确的做法是：

步骤1：搭建一个后端代理接口 #

用Node.js/Express做一个简单的代理路由，前端把授权码code传给你的后端，后端再去调用Buffer的token接口，最后把结果返回给前端。

示例Express代码：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// 代理接口，接收前端传来的code
app.post('/buffer-get-token', async (req, res) => {
  const { code } = req.body;
  const buffer_data = new URLSearchParams({
    client_id: '你的BUFFER_CLIENT_ID', // 安全存储在后端，绝不能暴露给前端
    client_secret: '你的BUFFER_CLIENT_SECRET',
    redirect_uri: BUFFER_CALLBACK_URL,
    code: code,
    grant_type: 'authorization_code',
  });

  try {
    const bufferResponse = await fetch('https://api.bufferapp.com/1/oauth2/token.json', {
      method: 'POST',
      body: buffer_data,
    });
    const result = await bufferResponse.json();
    res.json(result);
  } catch (err) {
    res.status(500).json({ error: '请求Buffer API失败', details: err.message });
  }
});

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

步骤2：前端修改为请求自己的后端代理 #

const queryString = require('query-string');
const parsed = queryString.parse(window.location.search);

// 请求自己的后端代理，而非直接请求Buffer API
fetch('http://localhost:3001/buffer-get-token', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ code: parsed.code }),
}).then(data => {
  console.log('data response ', data);
  return data.json();
}).then(response => {
  console.log(response);
}).catch(err => {
  console.error('请求错误:', err);
});

3. 关于使用Axios的建议 #

如果想用Axios代替fetch，同样要注意前端只请求自己的后端代理。后端用Axios请求Buffer的示例代码如下：

const axios = require('axios');

// 后端代理里的Axios请求逻辑
const getBufferToken = async (code) => {
  try {
    const response = await axios.post('https://api.bufferapp.com/1/oauth2/token.json', new URLSearchParams({
      client_id: '你的CLIENT_ID',
      client_secret: '你的CLIENT_SECRET',
      redirect_uri: BUFFER_CALLBACK_URL,
      code: code,
      grant_type: 'authorization_code',
    }));
    return response.data;
  } catch (err) {
    throw new Error(err.response.data.error_description || '请求失败');
  }
};

总结 #

• 永远不要在前端代码中暴露client_secret，必须通过后端代理请求OAuth token接口
• Buffer的token接口只接受application/x-www-form-urlencoded格式的请求体，不要用JSON
• 后端请求不会受到CORS限制，这是解决问题的唯一安全且有效的方式

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