Реагируйте на простой REST API, используя базовую c аутентификацию - PullRequest
Новая
       20

Реагируйте на простой REST API, используя базовую c аутентификацию

0 голосов
/ 05 августа 2020

Я пытаюсь научиться использовать реакцию с отдыхом и застрял в отладке или, по крайней мере, чтобы проверить, что идет не так. Я следил за инструкциями и просто заменил значения, чтобы они соответствовали моему образцу ответа api rest, но получаю пустую страницу.

мое приложение. js

 class App extends Component {
      render() {
        return (
          <Products products={this.state.products} />
        )
      }   
      state = {
        products: []
      };

      componentDidMount() {
        var headers = new Headers();
        //test1:test1 is username and password
        headers.append("Content-Type", "application/json");
        headers.append("Authorization", "Basic " + base64.encode("myKey:myPass"));

        fetch('myURL', {headers: headers})
        .then(res => res.json())
        .then((data) => {
          this.setState({ products: data })
        })
        .catch(console.log)
      }

    }

мои продукты. js

const Products = ({ products }) => {
  return (
    <div>
      <center><h1>Products List</h1></center>
      {products.map((product) => (
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{product.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{product.price}</h6>
            <p class="card-text">{product.id}</p>
          </div>
        </div>
      ))}
    </div>
  )
};

export default Products

мой пример json ответа выглядит так: 

{
    "products": [
        {
            "title": "Cras Selma dress",
            "id": 4985,            
            "price": "1499",
        },
        {
            "title": "Selected Homme Aron suede jacket",
            "id": 4886,
            "price": "2700",

        }
    ]
}

мое первое предположение заключается в том, что он не получает правильный ответ или не обрабатывает ответ. Когда я проверяю свой URL-адрес через почтальона с использованием аутентификации basi c, все возвращается нормально со всеми деталями, похожими на мой опубликованный ответ json.

1 Ответ

0 голосов
/ 05 августа 2020

Теперь я знаю, что у вас проблема с CORS (обсуждается в комментариях к вопросу). Есть несколько способов решить эту проблему, правильный способ будет зависеть от того, какой сервер вы используете.

Если вы используете Node.js:

app.use(cors())

будет достаточно, узнайте больше: https://expressjs.com/en/resources/middleware/cors.html

Кроме этого, если вам нужно быстрое исправление, есть Chrome расширений, которые помогут вам: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

Итак, проблема не в вашем коде, а в CORS, о ​​котором вы можете узнать подробнее здесь https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.

Еще одно быстрое решение для CORS: https://cors-anywhere.herokuapp.com/

Вы добавляете это перед фактическим API, примерно так: 

const MY_API = 'http://localhost:8080/api/items';

const FULL_API = `https://cors-anywhere.herokuapp.com/${MY_API}`;

axios.get(FULL_API);

Тем не менее, я настоятельно рекомендую поискать в Google, как решить Проблема CORS с сервером, который вы используете.

...