Ошибка извлечения данных из API с использованием кода носителя в React

Question

Я пытаюсь сделать вызов API, используя реагировать. Мой код похож на приведенный ниже. При попытке получить сообщение об ошибке (страница 404 не найдена).

componentDidMount() {
        this.setState({loading: true})
        fetch('https://jsonplaceholder.typicode.com/users', {

          headers: new Headers({
             Authorization: "Bearer XXXXXXXXXXXXXXXXXXXXX",
            "Content-Type": "application/json"
          }),
          method: "GET",
          mode: 'no-cors'
        })

Пожалуйста, помогите мне с вопросом.

Answer 1

Вы должны удалить свойство content-type. Тело запроса пустое, поэтому оно не выполняется.

W3C - Поле заголовка типа содержимого

Цель поля Content-Type - описать данные содержится в теле достаточно полно, чтобы принимающий пользовательский агент мог выбрать подходящий агент или механизм для представления данных пользователь или иным образом обращаться с данными надлежащим образом.

UPDATE: Если вы используете Chrome для тестирования, прочитайте эту тему В запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	res : {},
    };
  }
  
  componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users', {
             headers: new Headers({
             Authorization: "Bearer XXXXXXXXXXXXXXXXXXXXX",
          }),
          method: "GET"
        })
        .then(res => res.json())
        .then(json => this.setState({ res: json}));
 };
 
  render() {
    return (<div> { JSON.stringify(this.state) } </div>);
  };
}

ReactDOM.render(<MyApp />, document.body);

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>