Vue学习笔记-django-cors-headers安装解决跨域问题

时间：2021-08-05 11:41:24

一  使用环境: windows 7 64位操作系统

二  jango-cors-headers安装解决跨域问题(后端解决方案)

  • 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
  • 所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
  • http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
  • http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
  • http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
  • http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
  • http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）
  • 127.0.0.1:8000与127.0.0.1:8001(端口不同,跨域)
  • 请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
  • 浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

1.查看文档: https://github.com/adamchainz/django-cors-headers

2.按装: python -m pip install django-cors-headers

3.添加到setting的app中

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',  # admin依赖

    'django.contrib.contenttypes',  # admin依赖

    'django.contrib.sessions',  # admin依赖

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'corsheaders',  # 跨域设置4-(1-2):按装,注册跨域包(django-cors-headers),中间件中注册

]

4.添加中间件

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',

    'django.contrib.sessions.middleware.SessionMiddleware',

    'django.middleware.common.CommonMiddleware',

    'corsheaders.middleware.CorsMiddleware',  # 跨域设置4-3:跨域中间件,要放到csrf中间件前面

    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',

    'django.contrib.messages.middleware.MessageMiddleware',

    'django.middleware.clickjacking.XFrameOptionsMiddleware',

] 

5.setting下面添加下面的配置

# 跨域设置4-4:添加跨域设置

# 指明在跨域访问中，后端是否支持对cookie的操作

CORS_ALLOW_CREDENTIALS = True

# 允许所有 跨域请求

CORS_ORIGIN_ALLOW_ALL = True

# 白名单

CORS_ORIGIN_WHITELIST = ()

CORS_ALLOW_METHODS = ('DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW',)

CORS_ALLOW_HEADERS = (

    'XMLHttpRequest',

    'X_FILENAME',

    'accept-encoding',

    'authorization',

    'content-type',

    'dnt',

    'origin',

    'user-agent',

    'x-csrftoken',

    'x-requested-with',

    'Pragma',

    'x-token',

)

# 跨域设置4-4:添加跨域设置end

6.文档通过浏览翻译成中文

Vue学习笔记-django-cors-headers安装解决跨域问题

Vue学习笔记-django-cors-headers安装解决跨域问题

Vue学习笔记-django-cors-headers安装解决跨域问题

相关文章