关于项目前端与后台联调跨域问题的处理

比如前端站点：http://www.yanshi.shop:8080/register.html

后端站点：http://www.yanshi.shop:8000//usernames/kevin/count/

跨域顾名思义：协议、域名、端口中任意一个不同就是跨域请求。

在django框架中跨域请求的处理：

1.首先在前端页面会看到CORE相关的错误，请求成功，响应结果超时。

此时先在命令行执行操作：

pip install django-cors-headers

安装cors的跨域工具

2.在settings文件中注册跨域APP

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps.users',
    # CORS
    'corsheaders',

3.在中间件最前面添加cors跨域中间件

MIDDLEWARE = [
    # cors 的配置放在最上面
    'corsheaders.middleware.CorsMiddleware',

    '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',
]

4.设置cors跨域白名单和允许携带cookie

# CORS白名单
CORS_ORIGIN_WHITELIST=(
    'http://127.0.0.1:8080',
    'http://localhost:8080',
    'http://www.yanshi.shop:8080',
    'http://www.yanshi.shop:8000'
)
# 允许携带cookie
CORS_ALLOW_CREDENTIALS = True

5.前端页面访问操作，格外注意，禁用缓存、禁用缓存、禁用缓存，重要的事情说三遍。