跨域请求被阻止 Django-project

【问题标题】：Cross-Origin Request Blocked Django-project跨域请求被阻止 Django-project
【发布时间】：2020-08-10 01:58:22
【问题描述】：

我已经构建了一个 REST API，我正在学习本教程： https://www.youtube.com/watch?v=hISSGMafzvU&t=14s

我在 13 分钟前完成了所有工作。将 JS 脚本添加到 html 模板中。当我运行并检查控制台时，我得到：“跨域请求被阻止：同源策略不允许读取http://127.0.0.1:8000/api/task-list/ 的远程资源。（原因：CORS 标头'Access-Control-Allow-Origin'丢失）。”

我不知道 CORS 标头进入我的项目的哪个部分？

<script type="text/javascript">

        buildList()
        function buildList(){
            var wrapper = document.getElementById('list-wrapper')

            var url = 'http://127.0.0.1:8000/api/task-list/'

            fetch(url)
            .then((resp) => resp.json())
            .then(function(data){
                console.log('Data:', data)
            })
        }
</script>

【问题讨论】：

标签： javascript python html django django-rest-framework

【解决方案1】：

您必须将pip install django-cors-headers 添加到您的 Django 应用并配置它以允许请求。然后将其添加到您安装的应用程序中：

#settings.py

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

您还需要添加一个中间件类来监听响应：

#settings.py
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

只允许所有来源发出跨站 HTTP 请求：

#/settings.py
CORS_ORIGIN_ALLOW_ALL = True

注意：如果您正在开发中，则可以允许任何来源的所有 CORS。但不要在生产中这样做。

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'https//:yourdomain',
)

希望对你有帮助！

【讨论】：