Nuxt、DjangoAPI - 调用返回 CORS 错误

Question

我想用 Nuxt 和 Django API 构建我的第一个网站。

有人可以解释一下为什么“submit()”函数有效但“update_labels()”函数返回 CORS 错误吗？

我真的尝试自己修复它，但无法弄清楚。 如果有人可以解释并帮助我理解我的错误，那就太好了。

图片：

methods: {
        async submit() {
            const { data: token, error } = await useFetch('auth/jwt/create', {
                method: 'POST',
                baseURL: 'http://127.0.0.1:8000/',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(this.formData),
                onResponseError({response}) {
                    console.log('Error: ' + response.status)
                }
            })
            if (!error.value) {
                localStorage.setItem('token', token.value.access)
                return token.value.access
            } else {
                console.log(error)
            }
        },

        async update_labels() {
            const { data: user_data, error } = await useFetch('auth/users/me', {
                method: 'GET',
                baseURL: 'http://127.0.0.1:8000/',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'JWT ' + (localStorage.getItem('token'))
                },
                onResponseError({response}) {
                    console.log('Error: ' + response.status)
                }
            })
            
            if (!error.value) {
                console.log(user_data)
            }
        }
    }

在 Django 设置中尝试了不同的 CORS 设置。py -> 没有任何反应 -> 尝试空白白名单 -> Submit() 也收到 CORS 错误，所以它可以工作吗？

使用 Postman 测试端点 -> 没有问题

遇到一个奇怪的错误，我必须将 localhost:8000 更改为 127.0.0.1:8000。想用起源来做这件事，但不知道该怎么做

django - 设置.py

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

    'rest_framework',
    'rest_framework_simplejwt.token_blacklist',
    'djoser',
    'corsheaders',
    'accounts',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
]

CORS_ALLOW_ALL_ORIGINS = True

Answer 1

执行 POST 和 GET 时，CORS 的处理方式不同。您可能尚未设置 CORS 来接受所有 *. 另请注意，在 Django 文档中指出，CorsMiddleware 应尽可能放置在较高的位置，尤其是在任何可以生成响应的中间件（例如 Django 的 CommonMiddleware 或 Whitenoise 的）之前。

来自 GPT” POST 和 GET 请求之间的 CORS 处理可能存在差异。

简单请求与预检请求：对于简单请求（例如，简单的 GET 请求）和预检请求（例如，具有自定义标头的请求或 POST 等非简单方法），CORS 处理可能有所不同。简单请求是浏览器发送请求而不首先与服务器检查（预检）是否允许实际请求的请求。预检请求在实际请求之前发送，以与服务器确认是否允许实际请求。

CORS 标头：GET 和 POST 请求都可以触发 CORS 标头，但触发的情况可能有所不同。简单请求（包括简单的 GET 请求）比预检请求受的 CORS 标头更少。预检请求包括附加标头，例如 Access-Control-Request-Method 和 Access-Control-Request-Headers。

Content-Type 标头：如果您使用 POST 请求发送数据，并且 Content-Type 标头不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain，则浏览器将无论 HTTP 方法如何，都会自动将其视为预检请求。

标头和有效负载：虽然 GET 和 POST 请求都可以具有标头，但 POST 请求通常携带可能包含数据的有效负载（请求正文）。处理有效负载会在 CORS 中引入额外的注意事项。

安全影响：由于POST请求可以修改服务器上的数据，因此它们通常受到更严格的安全限制。与 GET 请求相比，浏览器可能要求服务器对 POST 请求实施更严格的 CORS 配置。

总而言之，虽然 CORS 原则适用于 GET 和 POST 请求，但实际的 CORS 行为可能会有所不同，具体取决于请求是简单请求还是预检请求、是否有请求正文、Content-Type 标头以及 HTTP 的安全含义方法。了解这些差异并确保您的服务器正确配置为针对您的应用程序发出的特定类型的请求处理 CORS 非常重要。”