跨域请求被阻止 - 来自反应本地主机的 API 请求

Posted 2023-02-22

【中文标题】跨域请求被阻止 - 来自反应本地主机的 API 请求

【英文标题】：Cross-Origin Request Blocked - Request to API from react localhost

【发布时间】：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 密钥，而您真的不想这样做。

是的，我知道，但它是一个简单的软件，一个人可以在他的房子或他的智能手机上运行，​​这是我考虑在客户端尝试它的唯一原因

【参考方案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 在同一个项目上吗？