CORS + Django 跨域配置

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

如需转载，标记出处

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

一、教程

1. 安装 django-cors-headers

pip install django-cors-headers

2. 添加到 Django 项目中的 INSTALLED_APPS

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

3. 添加到 MIDDLEWARE（必须放在较前位置，建议第一个）

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',  # 确保也有CommonMiddleware
    ...
]

4. 配置允许跨域的域名
只允许特定域，这里就是你的前端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

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 两者有什么区别？

跨域（CORS, Cross-Origin Resource Sharing）指的是：
浏览器限制，当前网页的 JavaScript 只能访问 "同源" 的资源。

 只要「协议、域名、端口」有任何一个不同，都算不同源（跨域）

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