Перекрестный запрос к серверу glitch.me

Question

Я создал сервер на glitch.me, и я пытаюсь обслуживать данные с сервера, но возникла следующая ошибка. localhost/:1 Доступ к выборке по адресу https://clem-quote-server.glitch.me/quotes из источника http://localhost:3000/ заблокирован политикой CORS:

В запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса "no-cors", чтобы получить ресурс с отключенным CORS.

Не совсем уверен, как решить эту проблему

import React, {Component} from "react"

class quotes extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            quotes: quotes
        };
    }

componentDidMount() {
    fetch("https://clem-quote-server.glitch.me/quotes")
      .then(res => res.json())
      .then(
        (result) => {
            this.setState({
            isLoaded: true,
              quotes: result.quotes
          });
        },
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
}

    render() {
        const { error, isLoaded, quotes } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
            return <div>Loading...</div>;
        } else {
            return (
              <ul>
                {quotes.map(quote => {
                    return quote;

                }  
                )}
              </ul>
            );
        }
    }
}       
    export default quotes;

Я хочу иметь возможность отображать один объект из списка массива каждый раз, когда страница загружается

Answer 1

Это происходит из-за CORS, который должен быть включен, когда сервер и клиент обрабатывают разные домены.

CORS включены в заголовки.

Вот как вы бы включили Corse в своем приложении реакции:

https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

Информация о CORS:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS