无效的 API 令牌

Question

我对 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 令牌错误。

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

Answer 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>
        );
    }
}