Not able to make a GET request to the django REST API backend for the id=1 article, from axios in reactjs

Question

I have a frontend application built using reactjs and django rest framework is used to serve this frontend using APIs. The django rest APIs are working fine, I have checked via Postman.

When I make a GET request to http://127.0.0.1:8000/articles/ , I get the list of articles, and when I click on one of them, it is supposed to take me to the article detail page for that specific id of the article. This is done by making a GET request to http://127.0.0.1:8000/articles/id .

The problem is, when I make GET request for id=2,3,4,5,... , it works fine. But when I try to make a request for id=1, I get the following error at console of chrome browser

Access to XMLHttpRequest at 'http://127.0.0.1:8000/articles/1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)

So, the request is not made at all(I verified from server side). All I get is the above error. Please note that there is no such error for articles/2 or articles/3 and so on. I have allowed the relevant host in django settings.py file.

This is the code I have for the article detail page .

function ArticlePage(props) {
    const [MainArticle, setMainArticle] = useState({});
    const {id} = useParams()
    const url = 'http://127.0.0.1:8000/articles/'+id;
    useEffect(() => {
        console.log("hello world");
        axios.get(url)
            .then((response) => {
                setMainArticle(response.data);
                console.log(response.data);
            })
            .catch((error)=>console.log(error))
    }, [url]);
    return (
        <section className="postsBody">
            <Article 
                title={MainArticle.title}
                author={MainArticle.author}
                timestamp={MainArticle.timestamp}
                content={MainArticle.content}
            />
        </section>
    )
}

Please help me out with this error, via debugging I came to know that the problem is not in the server side, the GET request works for id=1 via postman.

Answer 1

It's because of the CORS policy. Even if you allow the sites in the settings, you need to explicitly enable those websites to access content from your backend. Install cors headers app in Django and set the allowed origins. The documentation for cors headers has sufficient information.

Answer 2

I figured out the problem eventually. The problem is the browser cache. I updated django, djago-rest-framework, react and react-router-dom. Then I did a hard reload of the localhost:3000 website and it eventually started working. The key point is to clear the browser cache just after you add corsheaders and it will work. I took help from this Question