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 (后端的)接口

相关推荐
小王子102427 分钟前
Django实时通信实战:WebSocket与ASGI全解析(下)
python·websocket·django
叫我:松哥16 小时前
基于网络爬虫的在线医疗咨询数据爬取与医疗服务分析系统,技术采用django+朴素贝叶斯算法+boostrap+echart可视化
人工智能·爬虫·python·算法·django·数据可视化·朴素贝叶斯
工业甲酰苯胺19 小时前
Django集成Swagger全指南:两种实现方案详解
python·django·sqlite
我的ID配享太庙呀1 天前
从零开始:在 PyCharm 中搭建 Django 商城的用户注册与登录功能(轮播图+商品页-小白入门版)
数据库·python·django·sqlite·web·教育电商
叫我:松哥1 天前
优秀案例:基于python django的智能家居销售数据采集和分析系统设计与实现,使用混合推荐算法和LSTM算法情感分析
爬虫·python·算法·django·lstm·智能家居·推荐算法
PythonicCC1 天前
Django模板系统
数据库·django
ku_code_ku2 天前
Django关于ListView通用视图的理解(Cursor解释)
python·django·sqlite
Ice__Cai2 天前
Django Models详解:数据库模型的核心
数据库·python·sql·mysql·django
T - mars2 天前
DRF - 博客列表API
django