【发布时间】：2018-11-05 18:31:14
【问题描述】：
我正在尝试使用 fetch() 通过 react.js 连接到缓冲区的 API (https://buffer.com/developers/api/oauth)，但收到 400 错误响应。
这是在我的本地主机上运行的，但可以从 Internet 访问该站点。
这是我的代码：
const queryString = require('query-string');
const parsed = queryString.parse(window.location.search);
const buffer_data = {
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: JSON.stringify(buffer_data),
}).then( data => {
console.log('data response ' + data);
return data.json();
}).then( response => {
console.log(response);
});
下面是回复：
{"error":"invalid_request","error_description":"无效的授权类型 参数或参数缺失”}
控制台会打印：
无法加载https://api.bufferapp.com/1/oauth2/token.json：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://myserver.com” 使用权。响应的 HTTP 状态代码为 400。如果响应不透明 满足您的需求，将请求的模式设置为“no-cors”以获取 禁用 CORS 的资源。
我尝试了很多事情，比如不序列化数据、尝试发送许多不同的标头、使用 CORS chrome 插件等
在进行反应编码之前，我已经使用 PHP 成功连接，但为此我必须在我的服务器上添加 SSL 证书。
我也愿意使用任何图书馆，但还没有找到一个来做这项工作。或者任何其他的获取方法，比如 axios？
非常感谢！
【问题讨论】：
-
刚试过，也没用
-
返回的 400 错误是您唯一需要修复的问题。您没有 CORS 问题。 400 表示错误请求——服务器表明它收到的请求不是它期望或可以处理的格式。服务器默认只将 Access-Control-Allow-Origin 标头添加到 2xx 成功响应，而不是 4xx 或 5xx 错误。
-
好的。发送的参数正是需要的，因为它在 PHP 中工作。我猜它们是以错误的格式发送的，但已经尝试将其作为 json、字符串化和 var1=value&var2=value 发送，但也没有用。所以不知道我到底做错了什么，有什么猜测吗？
-
您是否尝试将
Content-Type设置为application/x-www-form-urlencoded？并像这样设置grant_typegrant_type=${authorization_code}&code=$parsed.code}&client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}? -
也没有用。使用 chrome 的 cors 插件暂时解决了这个问题，但我仍在寻找永久解决方案