无效的 API 令牌

Posted 2023-03-04

【中文标题】无效的 API 令牌

【英文标题】：Invalid API Token

【发布时间】：2019-10-05 14:34:20

【问题描述】：

我对 CORS 很陌生。我正在构建一个 React 应用程序，它只是将数据发布到后端 API。根据 API 文档，我必须发送一个 BASIC Authentication Header 以及我正在做的请求。当我通过 POSTMAN 发送请求时，请求工作得很好。但是当我从我的应用程序发出相同的请求时，它会显示无效的 API 密钥。以下是我的代码：

App.js：

import React from 'react';

class App extends React.Component

    state = 
        data: 'data'
    ;

    handleClick = async () =>
        const res = await fetch('https://myapi.com/post',
             method: 'POST', 
             body: JSON.stringify(tp:'0'),
             mode: 'cors',
             headers: 
                 content-type:'application/x-www-form-urlencoded',
                 Authorization : 'Basic ' + new Buffer('username:password').toString(base64)
             
        );
        const data = await res.json();
        this.setState(data);
    

    render() 
        return(
             <div>
                 <p>this.state.data</p>
                 <button onClick=this.handleClick>Post</button>
             </div>
        );
    

我调查了这个问题，发现发送请求时没有设置标头。当进一步深入研究时，我发现上述请求不是一个简单的请求，因此浏览器向服务器发出了预检 OPTIONS 请求。我不知道服务器如何处理请求，但我认为服务器未配置为处理预检选项。我可能错了。我无权访问服务器代码。通过 CORS Anywhere 代理和 POSTMAN 客户端的相同请求工作正常，但在使用实际应用程序时却不行。我使用 create-react-app 来设置样板。

在通过应用程序发送请求时，我得到的只是一个错误。

任何有关如何将标头传递到服务器的帮助将不胜感激。

【问题讨论】：

API是自己开发的还是第三方API？

第三方 API

您可能希望将标头包装在 Headers 对象中：observablehq.com/@mbostock/fetch-with-basic-auth 和 ***.com/a/34815964/6511985

是的，试过了。不工作

有趣。您假设的问题当然是可能的，他们确实没有正确处理 OPTION 预检请求。但是他们应该在更早的阶段与其他客户一起面临这个问题。至少，如果他们有更多的人使用 Web 界面使用 API。或者它是为你打造的？

【参考方案1】：

根据另一个post，您可能希望将授权标头包装在标头对象中。我猜您不应该真正关注 OPTIONS 请求，该请求不应包含任何用户凭据，并且服务器不应真正在 OPTIONS 请求more info 上查找任何凭据。

如果您进行以下更改会发生什么（不要忘记 npm install base-64）。

import React from 'react';
const base64 = require('base-64');

class App extends React.Component

    state = 
        data: 'data'
    ;

    handleClick = async () => 
        const headers = new Headers();
        headers.append("Authorization", "Basic " + base64.encode("user:password"));

        const res = await fetch('https://myapi.com/post',
             method: 'POST', 
             body: JSON.stringify(tp:'0'),
             mode: 'cors',
             headers: headers
        );
        const data = await res.json();
        this.setState(data);
    

    render() 
        return(
             <div>
                 <p>this.state.data</p>
                 <button onClick=this.handleClick>Post</button>
             </div>
        );
    

【讨论】：

我尝试制作一个 Headers 对象。同样的错误。我查看了 chrome 网络选项卡中的请求标头，它是空的。没有标头随请求一起传递。

你的意思是连同OPTION请求还是POST请求？

POST 请求