React Integration with Django Rest API & Fetch API Call to Backend Data | Fix React CORS Error

welcome back to my channel in this tutorial you will get learn how to integrate react application with django rest api and receive data using face api call from django rest api if you are new to the channel subscribe the channel to get more tutorials let's get started at first open package.json file and then start the development server of zhang rest api and then copy the url of back in server and here add the proxy url okay now i am going to fetch api call search here api ajax and apis from here copy this content and then create a new file inside source folder and name it article list my case and paste here and export default article list and also change the class name with article list in this class i am going to receive the article list from back in server so import react from react now i am going to access the article list from this url i am going to put this url here and i'm going to change the add a name items to articles also change here remove this portion okay now i am going to display the article list in a table okay now save this file and open index.js file and here import article list and add article list here fail to fetch data from backend server course error occurred okay now i am going to fix this error install django course headers on your computer or python virtual environment and then follow this documentation add code setters to install apps array of your backend project okay and then add the middleware the top of the common middleware add courses middleware course media class okay and then add course allowed origins here enter the react applications deployed url okay now we start the development server and reload react application that's it if you like this video like comment and share thank you so much for watching this video

Channel: TechWebDocs

Views: 8,046

Keywords: React Integration with Django Rest API & Fetch API Call to Backend Data | Fix React CORS Error, How to integrate React with Django Rest API, react and django integration, react fetch api, react integration with django, react django integration, react fetch data from api django, react api fetch data, react cors error fix, django react cors error, Fix React CORS Error, React Fetch API Call to Backend Data, Fetch API Call, techwebdocs, django rest framework, cors error in react js

Id: a3qnyDscl0w

Length: 6min 24sec (384 seconds)

Published: Sun Jul 24 2022