无法从 reactjs 中的 axios 向 id=1 文章的 django REST API 后端发出 GET 请求

Posted 2023-03-03

【中文标题】无法从 reactjs 中的 axios 向 id=1 文章的 django REST API 后端发出 GET 请求

【英文标题】：Not able to make a GET request to the django REST API backend for the id=1 article, from axios in reactjs

【发布时间】：2021-06-24 01:18:25

【问题描述】：

我有一个使用 reactjs 构建的前端应用程序，django rest 框架用于使用 API 为该前端提供服务。 django rest API 工作正常，我通过 Postman 进行了检查。

当我向 http://127.0.0.1:8000/articles/ 发出 GET 请求时，我会得到文章列表，当我点击其中一篇文章时，它应该会将我带到 article detail page 以获取文章的特定 ID。这是通过向 http://127.0.0.1:8000/articles/id 发出 GET 请求来完成的。

问题是，当我对 id=2,3,4,5,... 发出 GET 请求时，它工作正常。但是当我尝试请求 id=1 时，我在 chrome 浏览器的控制台中收到以下错误

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)

因此，根本没有发出请求（我从服务器端验证）。我得到的只是上述错误。 请注意articles/2 或articles/3 等不存在此类错误。我已在 django settings.py 文件中允许相关主机。

这是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>
    )

请帮我解决这个错误，通过调试我知道问题不在服务器端，GET 请求通过邮递员适用于 id=1。

【问题讨论】：

请用id = 1添加请求的响应。

@ZunayedShahriar 我已经更新了这个问题。对于 id=1，根本没有提出请求。我收到上面指定的错误。如果我不允许 django 的 ALLOWED HOSTS 中的本地主机，则此错误与我将得到的错误相同，但事实并非如此。

您的服务器端可能存在路由冲突。而且，我不了解 django。

如果是这样，那我为什么要通过邮递员得到正确的json数据

这真的很奇怪。

【参考方案1】：

这是因为 CORS 政策。即使您在设置中允许这些网站，您也需要明确允许这些网站从您的后端访问内容。在 Django 中安装 cors headers 应用程序并设置允许的来源。 cors headers 的文档有足够的信息。

【讨论】：

我在已安装的应用程序中提到了corsheaders，还添加了文档中提到的所需中间件。在 CORS_ALLOWED_ORIGINS 中列出了“localhost:3000”，但它仍然不起作用。我的意思是它当然适用于 1 以外的其他 id 值。请帮帮我。由于某种原因，我得到了相同的 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. 错误。

我发现问题是浏览缓存，写了一个新的答案。

【参考方案2】：

我最终发现了问题所在。问题是浏览器缓存。我更新了 django、djago-rest-framework、react 和 react-router-dom。然后我做了一个 localhost:3000 网站的hard reload，它最终开始工作了。关键是在添加corsheaders 之后清除浏览器缓存，它会起作用。我从这个Question得到了帮助