Fetch data from GET request

Question

When I call my API via my web browser I get the following result:

{"statusCode": 200, "body": "\"Cheers from AWS Lambda!\""}

However, I am now struggeling to show body via axios. Do you see what I am doing wrong?

import axios from "axios";
import React, { Component } from "react";

class App extends Component {
  state = {
    messages: []
  };

  componentDidMount() {
    axios
      .get(
        "https://12345.execute-api.eu-central-1.amazonaws.com/prod/get-data"
      )
      .then(response => {
        const messages = response.data;
        this.setState({ messages });
      });
  }

  render() {
    return (
      <ul>
        {this.messages}
        Test
        {this.state.messages.map(message => (
          <li>{message}</li>
        ))}
      </ul>
    );
  }
}
export default App;

what is `this.messages` ? where is `messages ` function ..is it `{JSON.stringify(this.state.messages)}` ? — blueseal, Nov 24 '19 at 09:30
That just shows me `[]`. It seems that messages doesn't receive the data it should receive? — Joey Coder, Nov 24 '19 at 09:31
Now that I looked in the console it actually says `Access to XMLHttpRequest at 'https://12345.execute-api.eu-central-1.amazonaws.com/prod/get-data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.` I guess that's not a react problem, but a permission problem? What confuses me is that I can call it via my web browser without any problems. — Joey Coder, Nov 24 '19 at 09:35
it may help you https://stackoverflow.com/a/18643011/5124488 — blueseal, Nov 24 '19 at 09:37
Apart from the CORS error, if you want to display the message body you will need to do `
hi, try this plugin for chrome browsers: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en — Ehsan Sadeghi, Nov 24 '19 at 10:14

score 0 · Answer 1 · answered Nov 25 '19 at 05:03

A few points:

1) Change this.messages in ul of render method to this.state.messages, as this.messages is undefined.

2) A good practice while using JSX is to keep js and html code as distinguishable as possible, so the map on a list should be done outside the return statement.

const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );

3) For more info about CORS error and how to rectify it while using AWS lambda, refer to this article which includes a code snippet: AWS: CORS

Fetch data from GET request

1 Answers1