Django Rest Framework - 跨源请求被阻止

Question

我正在使用 Django Rest Framework 开发一个 API。我正在尝试列出或创建一个“文章”对象，但是当我尝试访问控制台时出现此错误：

我将前端托管在 http://localhost:3000 并将请求发送到 127.0.0.1:8000

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
http://127.0.0.1:8000/api/articles/. 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). 
Status code: 200.

在setting.py中使用这个，我得到了上面的错误

CORS_ALLOWED_ORIGINs = [
    "http://localhost:3000",
]

但是如果使用此代码，那么它运行顺利

CORS_ORIGIN_ALLOW_ALL = True 

这是我的 GET 请求

useEffect(() => {
    fetch("http://127.0.0.1:8000/api/articles/", {
        'method': "GET",
        headers: { 
            'Content-Type': 'application/json',
            'Authorization': 'Token 746a97c3f72a5fc388762c5732e2c8340fc75ba9',
        }
    })
    .then(res => res.json())
    .then((data) => setArticles(data))
    .catch((error) => console.log(error))
  }, []);

setting.py中的其他配置似乎设置正确。

Answer 1

您的

CORS_ALLOWED_ORIGINs

设置有拼写错误（小写

s

），请尝试

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

并确保您的应用程序在

http://localhost:3000

上运行，因为

http://127.0.0.1:3000

可能会有不同的处理方式。