Reactjs выборка с учетными данными не работает - PullRequest
Новая
       54

Reactjs выборка с учетными данными не работает

0 голосов
/ 17 апреля 2020

Я пытаюсь выполнить запрос GET с помощью ключа Bearer и не могу понять, почему он не работает. В Postman GET-запрос работает отлично, но в моем приложении React. js этого не происходит. Я получаю 401 Несанкционированная ошибка в журнале консоли. Я добавил mode: 'no-cors', потому что в противном случае у меня появляется ошибка Failed to fetch. 

const token = 'https://website.com'
const key = 'XXXXXXXXXXXXX'
const obj = {
  method: 'GET',
  mode: 'no-cors',
  withCredentials: true,
  headers: {
    'Authorization': 'Bearer ' + key,
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      orders: []
    };
  }

  componentDidMount() {
    fetch(token, obj)
    .then(res => res.json())
    .then(
      (result) => {
        console.log(result)
        this.setState({
          isLoaded: true,
          orders: result.order
        });
      },
      (error) => {
        console.error(error)
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
  }

  render () {
    const { error, isLoaded, orders } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          {orders.order.number}
        </div>
      );
    }
  }
}

Так должен выглядеть объект. Почтальон GET response

Это ошибки журнала консоли, которые я получаю. Ошибки журнала консоли

Без mode: 'no-cors' У меня возникает эта проблема, как я могу ее решить? Не удалось получить ошибку

Есть идеи, в чем может быть проблема?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 18 апреля 2020

Я мог бы решить это, просто убрав mode: 'no-cors' и 'Access-Control-Allow-Origin': '*'. Таким образом, объект, отправленный в fetch, будет выглядеть так: 

const obj = {
  method: 'GET',
  withCredentials: true,
  headers: {
    'Authorization': 'Bearer ' + key,
    'Content-Type': 'application/json'
  }
}
0 голосов
/ 17 апреля 2020

Если вы используете режим no-cors, браузер не будет отправлять заголовки, которые не находятся в безопасном списке CORS. Поэтому заголовок «авторизация» не будет отправлен, а сервер не получит его и не ответит на код 401.

Вот более подробная информация. Использование API извлечения с режимом: 'no-cors', невозможно установить заголовки запроса

Решение: Удалить режим: no-cors, и сервер отвечает на запрос cors. Или просто сохраните заголовок типа контента.

...