无效的API令牌

Question

我对CORS很新。 我正在构建一个React App，它只是将数据发布到后端API。 根据API文档，我必须发送BASIC身份验证标头以及请求，这正是我正在做的事情。 当我通过POSTMAN发送请求时，请求工作正常。 但是，当我从我的APP发出相同的请求时，它会显示无效的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请求。 我不知道服务器如何处理请求，但我认为服务器没有配置为处理预检OPTIONS。 我可能错了。 我没有任何访问服务器代码的权限。 通过CORS Anywhere代理和POSTMAN客户端的相同请求工作正常但不是在使用实际应用程序时。 我使用create-react-app来设置样板。

通过应用程序发送请求时，我得到的是无效的API令牌错误。

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

Answer 1

根据另一篇文章 ，您可能希望在Headers-object中包装Authorization标头。 我猜你不应该真正关注OPTIONS请求，该请求不应该包含任何用户凭据，服务器不应该真正寻找OPTIONS请求的任何凭据， 更多信息 。

如果进行以下更改会发生什么（不要忘记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>
        );
    }
}