Reactjs вызывают Cakephp Api на локальном хосте: блокируется перекрестный запрос (CORS) - PullRequest
Новая
       4

Reactjs вызывают Cakephp Api на локальном хосте: блокируется перекрестный запрос (CORS)

0 голосов
/ 24 августа 2018

Я новичок, чтобы реагировать JS.Поэтому для обучения я установил его в своей системе, которая работает на локальном хосте с портом 3000. Я также установил версию 2.phakephp на xampp, который снова работает на локальном хосте, но с портом 8082. Теперь, когда я пытаюсь вызвать операции выборки изреагировать JS на мой API CakePHP, который находится на локальном хосте: 8082 Я получаю сообщение об ошибке:

"Запрос перекрестного источника заблокирован: та же политика происхождения запрещает чтение удаленного ресурса на http://localhost:8082/cakephp298/users/apitest. (причина:Заголовок CORS «Access-Control-Allow-Origin» отсутствует). "

Я попытался добавить атрибут crossorigin в теги сценария в моем индексном файле, но он не работает.Я ищу решение для добавления заголовков в операции выборки.

------ вот мой код для реакции ---- 

import React, { Component } from 'react';

class Login extends Component {
  constructor() {
    super();
    this.clicksfile = this.clicksfile.bind(this);
  }

  render() {
    return (

      <div id="mc_embed_signup">
        <input name="EMAIL" placeholder="Email address" required type="email" />
        <input name="password" type="password" placeholder="Password" required />

        <button onClick={ this.clicksfile } className="primary-btn hover d-inline-flex align-items-center">
          <span className="mr-10">Go</span><span className="lnr lnr-arrow-right" /></button>
        <div className="info" />
      </div>


    );
  }

  clicksfile(e) {
    fetch('http://localhost:8082/cakephp298/users/apitest').then(response => response.json()).then(response => {

      console.log('details fetched successfully they are');
      console.log(response);
    }).catch(error => {
      console.log('There is some error ashish');
      console.log(error);
    });
  }
}

Есть предложения?Спасибо тебе

1 Ответ

0 голосов
/ 24 августа 2018

Это не проблема с реакцией, а ограничение, которое применяется приложением CakePHP.

Cross-Origin Resource Sharing (CORS) - это механизм, который использует дополнительные заголовки HTTP, чтобы сообщатьбраузер, позволяющий веб-приложению, работающему в одном источнике (домене), иметь разрешение на доступ к выбранным ресурсам с сервера в другом источнике.

Это означает, что вы не можете отправлять запросы в другие домены или порты.без явного разрешения.В этом случае вы выполняете реакцию на http://localhost:3000/ и пытаетесь запросить http://localhost:8082/.

. Чтобы включить это, вам нужно добавить следующий заголовок HTTP-ответа в конечную точку приложения CakePHP.

Access-Control-Allow-Origin: http://localhost:3000

В CakePHP это будет выглядеть следующим образом 

$response = $response->withHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

Подробнее об этом HTTP-заголовке можно узнать здесь и как установить заголовки в CakePHP здесь

...