CORS error during fetch onComponentDidMount in ReactJS

Question

i am getting empty page as output while fetching api data in reactjs.

Repo: https://github.com/te3t0/building-small-blog

i am probably new to reactjs, i am getting an empty page even data are fetched perfectly. it would be great if anybody could help me where i am doing thing wrong. thank you so much in advance.

endpoint_url : http://localhost:8000/api/blog_list

api-data:

[
    {
        "id": 1,
        "url": "http://localhost:8000/api/blog_detail/brown",
        "title": "brown",
        "slug": "brown",
        "image": "http://localhost:8000/media/blog/image_2.jpg",
        "description": "",
        "created_on": "2020-05-08T15:20:53Z",
        "status": true,
        "category": [
            1
        ]
    },
    {
        "id": 2,
        "url": "http://localhost:8000/api/blog_detail/black",
        "title": "black",
        "slug": "black",
        "image": "http://localhost:8000/media/blog/loc.png",
        "description": "",
        "created_on": "2020-05-08T17:14:31Z",
        "status": true,
        "category": [
            2
        ]
    }
]

./src/Base.js

export default class App extends Component{

  state = {
    bloglist:[]
  };

  componentDidMount(){
    this.fetchData()
  }

  fetchData = async () => {
    try{
      const response = await fetch("http://localhost:8000/api/blog_list");
      const jsonResponse = await response.json()
      this.setState({bloglist:jsonResponse})
    }
    catch(error){
      console.log(error)
    }
  }

  render(){
    const {bloglist} = this.state
    if(!bloglist){
      return (
        <div>
          <h1>loading...</h1>
        </div>
      )
    }

    return (
      {
        bloglist.map(bloglist => (
          <h3 class="mb-2">
            <a href="single.html">{bloglist.title}</a>
          </h3>
          <p class="mb-4">{bloglist.description}</p>
          ))
      }
    )
  }
}

here is my repository--> https://github.com/te3t0/building-small-blog @DenisTsoi — bounty, May 09 '20 at 07:26
usually i am getting an blank page while fetching data. i am not getting result as expected. @GalAbra — bounty, May 09 '20 at 07:28
the app is getting a `GET http://localhost:8000/api/blog_list net::ERR_FAILED` - from `Access to fetch at 'http://localhost:8000/api/blog_list' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.` — Denis Tsoi, May 09 '20 at 07:47
it means you dont have CORS enabled for the app - hence the fetch is failing — Denis Tsoi, May 09 '20 at 07:47
try to upvote as well - ive upvoted your other questions so that should help — Denis Tsoi, May 09 '20 at 08:24
now it's showing me error at, "{bloglist.map(bloglist => " Syntax error: Unexpected token, expected. @DenisTsoi — bounty, May 09 '20 at 08:52
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/213470/discussion-between-denis-tsoi-and-bounty). — Denis Tsoi, May 09 '20 at 09:03
hey there... could you take a look at this link? --> https://stackoverflow.com/questions/61856949/how-to-fetch-pagination-effect-in-reactjs — bounty, May 17 '20 at 18:50

score 2 · Accepted Answer · answered May 09 '20 at 08:06

Since this is a first post for you - there's a few things that didn't go well in terms of debugging the problem.

For larger problems like the one you asked - it helps to provide the error from the developer console tools as well as the remote repository source.

e.g.

GET http://localhost:8000/api/blog_list net::ERR_FAILED

'http://localhost:8000/api/blog_list' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

From there - by including the remote repository - I was able to find out more via How can I enable CORS on Django REST Framework

Which led to the following answer:

pip install django-cors-headers
add installed apps

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

add middleware

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',  
    'django.middleware.common.CommonMiddleware',  
    ...
)

CORS_ORIGIN_ALLOW_ALL = True # If this is used then `CORS_ORIGIN_WHITELIST` will not have any effect
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
] # If this is used, then not need to use `CORS_ORIGIN_ALLOW_ALL = True`
CORS_ORIGIN_REGEX_WHITELIST = [
    'http://localhost:3000',
]

CORS error during fetch onComponentDidMount in ReactJS

1 Answers1