Неверный API-токен - PullRequest
Новая
       29

Неверный API-токен

0 голосов
/ 18 мая 2019

Я довольно новичок в 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-реакции-приложение для настройки шаблона.

Я получаю только недопустимую ошибку токена API при отправке запроса через приложение.

Буду признателен за любую помощь, как получить заголовки на сервер.

1 Ответ

0 голосов
/ 18 мая 2019

Согласно другой записи , вы можете захотеть обернуть заголовок Authorization в объект Headers.Я полагаю, что вам не следует обращать внимание на запрос 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>
        );
    }
}
...