【问题标题】:Cross-Origin Request Blocked - Request to API from react localhost跨域请求被阻止 - 来自反应本地主机的 API 请求
【发布时间】:2018-09-17 15:51:44
【问题描述】:

我正在尝试 javascript 框架做出反应,我需要从该服务的 api 获取令牌:https://api.monetizze.com.br/2.1/apidoc/#api-Security-Token。为此,我需要连同请求一起发送我的 X_CONSUMER_KEY。这就是我尝试使用 axios 库的方式:

axios.request('https://api.monetizze.com.br/2.1/token', {           
    headers: {              
        'X-Requested-With' : 'XMLHttpRequest',              
        'X_CONSUMER_KEY': 'here is my key'
    }
});

我在浏览器控制台上得到的响应如下:

跨域请求被阻止:同源策略不允许读取 https://api.monetizze.com.br/2.1/token 的远程资源。 (原因:CORS 预检通道未成功)。

您是否遇到过该问题并已解决?对不起,我的英语很差,非常感谢。

【问题讨论】:

  • 您确定此 API 支持对该特定端点的客户端请求吗?他们展示的代码示例 cURL 和 PHP 都是服务器端的;并且考虑到这需要一个“消费者密钥”,也可能是这个密钥不应该在任何客户端代码中公开。
  • 我会尝试请求一个节点(express)来执行请求,然后把结果放在这里
  • 看起来这个 API 并不打算直接从浏览器中使用。您必须向您的用户公开 API 密钥,而您真的不想这样做。
  • 是的,我知道,但它是一个简单的软件,一个人可以在他的房子或他的智能手机上运行,​​这是我考虑在客户端尝试它的唯一原因

标签: ajax reactjs api axios


【解决方案1】:
http.get({
    host: 'api.monetizze.com.br',
    path: '/2.1/token',
    headers: {
        X_CONSUMER_KEY: 'your_consumer_key',
    }
}, (result) => {
    console.log(req.headers);
    res.send(result.statusCode)
});  

服务器端应用程序中的那段代码完成了这项工作,非常感谢。

【讨论】:

  • 我路过是为了检查我遇到的类似错误,我建议编辑您的答案以放置一个带有虚拟名称(如“your_consumer_key”)的消费者密钥,因为您似乎在这里放了一个真实的.希望这会有所帮助
  • @Wolgan Ens。您将服务器端应用程序放在哪里?它和 React 在同一个项目上吗?
猜你喜欢
  • 2015-06-22
  • 1970-01-01
  • 2019-11-04
  • 2017-02-06
  • 2021-06-26
  • 2014-10-13
  • 2019-03-05
相关资源
最近更新 更多