CORS + Django 跨域配置

之前学的跨域,最近访问页面总是时有时无的,今天下定决心好好研究。

如需转载,标记出处

关于 CORS(跨域资源共享) ,官方推荐使用第三方库是 django-cors-headers( Django 跨域问题的标准工具)

一、教程

  1. 安装 django-cors-headers

pip install django-cors-headers

  1. 添加到 Django 项目中的 INSTALLED_APPS

INSTALLED_APPS = [

...

'corsheaders',

...

]

  1. 添加到 MIDDLEWARE(必须放在较前位置,建议第一个)

MIDDLEWARE = [

'corsheaders.middleware.CorsMiddleware',

'django.middleware.common.CommonMiddleware', # 确保也有CommonMiddleware

...

]

  1. 配置允许跨域的域名

只允许特定域,这里就是你的前端url,ip地址也要带上,

CORS_ALLOWED_ORIGINS = [

"http://example.com:8080", # 你的正式域名

]

要是有具体的域名,需要配置hosts文件(参照中间的meiduo.site那一行)

5.指定哪些主机名(域名或 IP 地址)允许访问你的 Django 网站

ALLOWED_HOSTS 是 Django 的访问白名单,只有写进去的域名或 IP 才能访问,否则拒绝访问。

ALLOWED_HOSTS = ['www.meiduo.site','127.0.0.1']

6.进阶配置(根据需要选择,可以不看)

1). 允许发送认证信息(如 cookie、凭证等)

CORS_ALLOW_CREDENTIALS = True

2). 允许特定的 HTTP 方法

CORS_ALLOW_METHODS = [

"DELETE",

"GET",

"OPTIONS",

"PATCH",

"POST",

"PUT",

]

二、我自己的配置如下:

前端www.meiduo.siteL:8080

后端是8000

python 复制代码
ALLOWED_HOSTS = ['www.meiduo.site','127.0.0.1']

# Application definition

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

]
#跨域添加白名单

CORS_ALLOWED_ORIGINS = [
    'http://127.0.0.1:8080',
    'http://localhost:8080',
    'http://www.meiduo.site:8080',
]
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie
CORS_ALLOW_METHODS = [
    "GET",
    "POST"
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

三、运行

我的前后端目录放在同一个文件夹中

进入前端目录里,开个终端

python3 -m http.server 8080

再启动django

访问​​​​​​​http://www.meiduo.site:8080/index.html

搞定

问题集:

1.ALLOWED_HOSTS和CORS_ALLOWED_ORIGINS 两者有什么区别?

|----------------------|-----------------------------|-------------------------------------------|
| 配置 | 作用 | 针对的对象 |
| ALLOWED_HOSTS | 谁能访问 Django 服务器 | 浏览器发出的所有请求 举例:http://www.meiduo.site |
| CORS_ALLOWED_ORIGINS | 允许哪些前端域名跨域调用 Django API | 前端网页的 跨域请求 举例:http://www.meiduo.site:8080 |

跨域(CORS, Cross-Origin Resource Sharing)指的是:

浏览器限制,当前网页的 JavaScript 只能访问 "同源" 的资源。

只要「协议、域名、端口」有任何一个不同,都算不同源(跨域)

端口不同,哪怕 IP 和协议都相同,也算跨域。浏览器默认 不允许 JS 跨域请求接口,所以需要通过 CORS 告诉 Django:我允许 8080(前端的) 来调用我 8000 (后端的)接口

相关推荐
博观而约取16 小时前
Django ORM 1. 创建模型(Model)
数据库·python·django
小王子102418 小时前
Django+DRF 实战:从异常捕获到自定义错误信息
后端·django·web开发
ઈ一笑ഒ19 小时前
Django
django
互联网搬砖老肖1 天前
Python 中如何使用 Conda 管理版本和创建 Django 项目
python·django·conda
沛沛老爹11 天前
Python Django全功能框架开发秘籍
python·django·orm·web开发·模板引擎·项目部署·表单处理
Q_Q196328847511 天前
python基于微信小程序的广西文化传承系统
开发语言·spring boot·python·微信小程序·django·flask
程序员爱钓鱼11 天前
Go Web开发框架实践:模板渲染与静态资源服务
后端·django·go
Q_Q196328847512 天前
python高校教务管理系统
开发语言·spring boot·python·django·flask·node.js·php
里探12 天前
Django中为api自定义一些装饰器:如参数校验等
python·django·装饰器模式