跨源请求被阻止的项目

Question

我已经构建了一个REST API，下面是本教程的内容： https://www.youtube.com/watch?v=hISSGMafzvU&t=14s

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

我不知道我的项目的哪一部分是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>

Answer 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

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

CORS_ORIGIN_ALLOW_ALL = False

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

我希望有帮助