跨域请求被阻止：同源策略不允许在 http://127.0.0.1:8000/api/task-list/ 读取远程资源

Posted 2023-03-03

【中文标题】跨域请求被阻止：同源策略不允许在 http://127.0.0.1:8000/api/task-list/ 读取远程资源

【英文标题】：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/task-list/

【发布时间】：2021-07-30 12:36:26

【问题描述】：

我正在开发一个 vuejs 和 django rest 单页应用程序。 问题很明显，我收到 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource 错误。

我的 vuex 代码如下：

mutations:
        addTask: function()
            axios(
                url: 'http://127.0.0.1:8000/api/task-list/',
                method: 'POST',
                headers: 
                    'X-CSRFToken': getCookie('csrftoken')
                
            ).then(response => 
                console.log(response.data);
            ).catch(err => 
                console.log(err.response);
            )
        
    ,

还有我的 django rest urls.py，在我的 django 应用程序 urls 中：

urlpatterns = [
    path('task-list/', TaskList.as_view()),
    path('task-create/', TaskCreate.as_view())
]

和我的主要应用网址：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('task.urls')),
    path('api/', include('authentication.urls')),
    path('home/', returnHome)
]

我的views.py代码：

class TaskList(APIView):
    def get(self, request):
        tasks = Task.objects.all()
        serialized = TaskSerializer(tasks, many=True)
        return Response(serialized.data, status=200)

我的 vue 应用在 http://localhost:8080 上运行，所以我安装了 django cors 头文件，配置如下代码：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',


    # rest api
    'rest_framework',
    'rest_framework.authtoken',
    'corsheaders',

    # my apps
    'authentication',
    'task'
]
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ALLOWED_ORIGINS = [
   'http://localhost:8080',
   'https://localhost:8080'
]

虽然，我仍然收到 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/task-list/. (Reason: CORS request did not succeed) 错误！

我什至尝试过CORS_ALLOW_ALL_ORIGINS = True，但仍然没有任何变化......

我在这里做错了吗？我对此进行了很多搜索，但解决方案到处都是为 corsheaders 编写正确的配置。

【问题讨论】：

CORS_ALLOWED_ORIGINS 列表中有两个项目。您没有添加逗号来分隔它们。是错字吗？或者尝试编辑它。

@MilonMahato 谢谢我编辑了那个。好吧，我分别尝试了它们，也尝试了它们，但我仍然收到错误。

【参考方案1】：

你的问题是 Django 中间件的位置，特别是相对于CommonMiddleware。它应该列在上面。

来自django-cors-headersREADME：

CorsMiddleware 应放置在尽可能高的位置，尤其是在任何可以生成响应的中间件之前，例如 Django 的 CommonMiddleware 或 Whitenoise 的 WhiteNoiseMiddleware。如果不是之前，它将无法将 CORS 标头添加到这些响应中。 此外，如果您使用的是 CORS_REPLACE_HTTPS_REFERER，它应该放在 Django 的 CsrfViewMiddleware 之前（见下文）。