无法加载资源：Access-Control-Allow-Origin不允许使用原始http：// localhost：8080

Question

我有一个Vue.js前端项目，该项目从8080端口开始。 我通过以下方式访问该网站： http：// localhost：8080 / register

然后我使用Python / Django编写后端网站。 使用Django-Rest-Framework提供API。 我的后端API服务器的启动方式为：http： //0.0.0.0 ： 8001 /

但是当我注册（访问api）时，出现以下Access-Control-Allow-Origin错误：

加载资源失败：Access-Control-Allow-Origin不允许使用起源http：// localhost：8080 。

---

在我的Python后端项目中， settings.py代码为：

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

SECRET_KEY = '8cyiv%(rkpv33s_(n8x_5&+6-9&s!ddc!0)98la3=9(y8=k$4u'

DEBUG = True

ALLOWED_HOSTS = ['*']

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

    'corsheaders', 

    'rest_framework',
    'rest_framework.authtoken',
    'rest_framework_docs',  # API docs
    'rest_auth',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'rest_auth.registration',

    'wx_numbers',
    'users_management',

]

SITE_ID = 1

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',

    'corsheaders.middleware.CorsMiddleware',   # corsheaders

    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

CORS_ORIGIN_ALLOW_ALL = False

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = (

    'http://localhost:8080',
    'http://localhost:8081',
    'http://localhost',
    'http://localhost:8888',
)

ROOT_URLCONF = 'wx_backup.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'wx_backup.wsgi.application'

AUTH_USER_MODEL = "users_management.User"

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'wx_backup',
        'USER':'root',
        'PASSWORD':'abcdefghij',
        'HOST':'127.0.0.1',
        'PORT':'3306',
    }
}


# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'zh-cn'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

# STATIC_ROOT = BASE_DIR + '/static/'
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

您会看到我将corsheaders用作CORS解决方案，并且还在其CORS_ORIGIN_WHITELIST配置了'http://localhost:8080' 。 为什么我仍然收到此错误？

Answer 1

像下面这样配置白名单：

CORS_ORIGIN_WHITELIST = (

    'localhost:8080',
    'localhost:8081',
    'localhost',
    'localhost:8888',
)

Answer 2

CORS_ORIGIN_WHITELIST = (

    'localhost:8080',
    'localhost:8081',
    'localhost',
    'localhost:8888',
)

没有http：//