无法使用React.js获取方法

时间:2018-05-26 16:20:02

标签: reactjs api fetch

我正在尝试使用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?

非常感谢!

1 个答案:

答案 0 :(得分:-1)

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

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

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

问候!