Задать вопрос
@D_K_D
Junior

Почему немогу взять данные со своего localhost .?

Есть свой localhost по адресу localhost:8000/ping 5f51063945fea842481107.png
Но почему то с него не могу взять данные а с другово api адреса получается то есть дела не в моём коде . Использую linux и браузер Ghrome.
Вот код
class Judges extends Component {

  constructor(props) {
    super(props);
    this.state = {
      mypersons : null
    };
  }
handleClick = (e) => {
    e.preventDefault();
    axios.get(`http://localhost:8000/ping`) 
    .then(res => {
      console.log(res.data)  // ничего не выводит 
      const persons = res.data;
     this.setState({ persons : persons });
     })
  }
 render() {
    return (
      <div >
          <button onClick={this.handleClick}></button>
          <div>
            {this.state.mypersons}
          </div>
      </div>
    );
  }
}

export default Judges;

В консоли выводит ошибку:
5f510a5940f9a159481094.png
Access to XMLHttpRequest at 'localhost:8000/ping' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:8000/ping:1 Failed to load resource: net::ERR_FAILED
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:91)
  • Вопрос задан
  • 628 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Решения вопроса 4
Sanes
@Sanes
CORS
Ответ написан
Комментировать
flapflapjack
@flapflapjack
на треть я прав
вам достаточно загуглить "Access-Control-Allow-Origin" чтобы все заработало.

Нужно послать

header("Access-Control-Allow-Origin: *");

в самом начале скрипта, который запрашиваеТСЯ
Ответ написан
Комментировать
Aetae
@Aetae
Тлен
Ответ на вопрос: потому что порты разные. Разные порты - разные сайты.
Если это вам нужно для разработки, то следует просто проксировать все запросы на бэк будто они локальные(ведь в проде так и будет наверняка).
Если использовали create react app, то тут написано как это сделать. (просто добавить "proxy": "http://localhost:8000", в package.json)
Ответ написан
Комментировать
Sqvall
@Sqvall
Python, JavaScript fullstack developer.
Если не хочешь парится с кодом и есть возможность использовать другой браузер, качаешь chromium, из папки с ним вызываешь в консоле:
./chrome --disable-web-security --disable-gpu --user-data-dir=~/

Корс не будет мешать, но да, желательно почитать про корс.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽