使用 Nuxtjs 访问 Django api 时出现 CORS 错误

Question

我有一个 Nuxtjs 前端和一个 Django 后端。我想使用我的后端 api 并拥有以下 index.vue :

    <template>
      <div class="container">
        <h1>{{ data }}</h1>
      </div>
    </template>

    <script>
    import axios from 'axios'

    export default {
      async asyncData({ params }) {
        // We can use async/await ES6 feature
        const { data } = await axios.get(`localhost:8000/api`)
        return { data }
      }
    }

</script>

我的 nuxt.config.js 有这个代码：

  axios: {
    baseURL: 'localhost:8000',
    proxyHeaders: false,
    credentials: false,
    mode: 'no-cors'
  },

我的 Django settings.py 应该没问题，因为它安装了 corsheaders :

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'django_celery_results',
    'django_celery_beat',
    'rest_framework',
    'core',
]

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

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False

不知道发生了什么，也不知道为什么 axios 仍在引发 CORS 错误：

VM1921:1 Access to XMLHttpRequest at 'localhost:8000/api' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ VM1921:1
dispatchXhrRequest @ commons.app.js:199
xhrAdapter @ commons.app.js:33
dispatchRequest @ commons.app.js:638
Promise.then (async)
request @ commons.app.js:445
Axios.(anonymous function) @ commons.app.js:455
wrap @ commons.app.js:898
_callee$ @ pages_index.js:51
tryCatch @ commons.app.js:5762
invoke @ commons.app.js:5988
prototype.(anonymous function) @ commons.app.js:5814
asyncGeneratorStep @ vendors.app.js:31
_next @ vendors.app.js:53
(anonymous) @ vendors.app.js:60
(anonymous) @ vendors.app.js:49
asyncData @ pages_index.js:69
promisify @ app.js:2841
(anonymous) @ app.js:1089
_callee4$ @ app.js:1059
tryCatch @ commons.app.js:5762
invoke @ commons.app.js:5988
prototype.(anonymous function) @ commons.app.js:5814
asyncGeneratorStep @ vendors.app.js:31
_next @ vendors.app.js:53
Promise.then (async)
asyncGeneratorStep @ vendors.app.js:41
_next @ vendors.app.js:53
Promise.then (async)
asyncGeneratorStep @ vendors.app.js:41
_next @ vendors.app.js:53
Promise.then (async)
asyncGeneratorStep @ vendors.app.js:41
_next @ vendors.app.js:53
Promise.then (async)
asyncGeneratorStep @ vendors.app.js:41
_next @ vendors.app.js:53
(anonymous) @ vendors.app.js:60
(anonymous) @ vendors.app.js:49
_render @ app.js:1170
render @ app.js:787
_callee5$ @ app.js:1478
tryCatch @ commons.app.js:5762
invoke @ commons.app.js:5988
prototype.(anonymous function) @ commons.app.js:5814
asyncGeneratorStep @ vendors.app.js:31
_next @ vendors.app.js:53
Promise.then (async)
asyncGeneratorStep @ vendors.app.js:41
_next @ vendors.app.js:53
(anonymous) @ vendors.app.js:60
(anonymous) @ vendors.app.js:49
_mountApp @ app.js:1504
mountApp @ app.js:1402
Promise.then (async)
(anonymous) @ app.js:550
./.nuxt/client.js @ app.js:1506
__webpack_require__ @ runtime.js:787
fn @ runtime.js:150
0 @ app.js:3779
__webpack_require__ @ runtime.js:787
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
app.js:540 Error: Network Error
    at createError (commons.app.js:565)
    at XMLHttpRequest.handleError (commons.app.js:108)
    at XMLHttpRequest.send (<anonymous>:1:781)
    at dispatchXhrRequest (commons.app.js:199)
    at new Promise (<anonymous>)
    at xhrAdapter (commons.app.js:33)
    at dispatchRequest (commons.app.js:638)

Answer 1

您错过了 url 中的协议。

    const { data } = await axios.get(`http://localhost:8000/api`)

Answer 2

我认为你需要将端口列入白名单

在settings.py

CORS_ORIGIN_WHITELIST = (
    'http://190.0.0.21:8080',   # server ip
    'localhost:8000',           # local host
    '*'                         # allow all
)

使用 Nuxtjs 访问 Django api 时出现 CORS 错误

CORS error when accessing Django api with Nuxtjs

django

cors

django-cors-headers

nuxt.js