Question

我正在尝试使用fetch（）通过react.js连接到缓冲区的API（https://buffer.com/developers/api/oauth），但我收到400错误响应。

这是在我的本地主机上运行，但该网站可从互联网访问。

这是我的代码：

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”：“无效的grant_type 参数或参数缺失“}

控制台打印出来：

无法加载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？

非常感谢！

Answer 1

我不知道您使用的是哪种浏览器，但您可能想要添加Allow-Control-Allow-Origin

用于您的Chrome浏览器（如果您使用的是Chrome）。当您使用带有chrome的localhost时，这似乎是一个问题。

另外，我强烈建议使用axios来获取API，它附带了一些简单的错误日志，可以帮助您快速确定问题。

问候！

无法使用React.js获取方法

1 个答案: