Nuxt调用Django API时submit()正常但update_labels()报CORS错误求助

1. 修正Django中间件顺序 #

你的MIDDLEWARE配置里，CorsMiddleware的位置错误——它被放在了django.middleware.common.CommonMiddleware之后，这会导致CORS响应头无法正确生成。正确的做法是把CorsMiddleware移到SecurityMiddleware之后、其他中间件之前：

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

2. 排查Token的有效性与格式 #

别被CORS报错误导，有时候浏览器会把认证失败的错误包装成CORS错误。你可以检查这几点：

• 打开浏览器控制台，打印localStorage.getItem('token')，确认拿到的是有效的JWT字符串，不是null或者空值。
• 确认Authorization头的格式：'JWT ' + token里必须有空格，正确格式是JWT <你的token>。
• 用Postman带上同样的Token请求auth/users/me，验证Token是否过期或者无效。

3. 强制Nuxt在客户端发起请求 #

如果update_labels是在页面加载时自动调用的，Nuxt可能会在服务器端发起请求，此时请求的origin是Nuxt服务器，而非浏览器，这也会触发CORS问题。给useFetch加上server: false选项，强制在客户端请求：

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

4. 清除浏览器缓存 #

浏览器可能缓存了旧的CORS规则，试试用无痕模式打开页面，或者手动清除缓存后重新测试。

额外优化：统一API地址配置 #

为了避免localhost和127.0.0.1的混乱，建议在Nuxt的配置文件nuxt.config.ts里全局配置API地址：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: 'http://127.0.0.1:8000/'
    }
  }
})

之后在useFetch里直接调用：

await useFetch('auth/jwt/create', {
    baseURL: useRuntimeConfig().public.apiBase,
    // 其他配置不变
})

内容的提问来源于stack exchange，提问作者Shirony