CORS + Django 跨域配置

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

如需转载，标记出处

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

一、教程

安装 django-cors-headers

pip install django-cors-headers

添加到 Django 项目中的 INSTALLED_APPS

INSTALLED_APPS = [

...

'corsheaders',

...

]

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

MIDDLEWARE = [

'corsheaders.middleware.CorsMiddleware',

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

...

]

配置允许跨域的域名

只允许特定域，这里就是你的前端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 （后端的）接口