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 definitionINSTALLED_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 （后端的）接口