django跨域配置

django跨域

1.安装第三方库

pip install django-cors-headers

2.修改setting.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',  # 重点
    'apps.test'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 添加cors,在第三行,位置不能改
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',  # 取消django自带的csrf
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    ''
)
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)
### 配置Django与Vue间的CORS 为了使Django后端能够处理来自不同源的Vue前端请求,需正确配置CORS(源资源共享)。这涉及到安装并配置`django-cors-headers`库以及调整Django项目的设置。 #### 安装 `django-cors-headers` 通过pip工具来安装此Python包: ```bash pip install django-cors-headers ``` #### 更新 `settings.py` 在Django应用中的`settings.py`文件里加入`'corsheaders'`至`INSTALLED_APPS`列表中[^4]。同时,在中间件类(Middleware classes)部分添加`CorsMiddleware`,确保其位于最上方以便尽早拦截HTTP请求: ```python MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ... ] INSTALLED_APPS = [ ... 'corsheaders', ... ] ``` #### 设置允许访问的来源 继续编辑`settings.py`,定义哪些网站可以向服务发起安全的站点HTTP请求。可以通过指定确切的URL或者使用通配符(*)表示接受所有来源(仅限开发环境): ```python # 开发环境下可暂时设为True,但在生产环境中应严格控制该选项 CORS_ORIGIN_ALLOW_ALL = True # 或者更推荐的做法是指定具体的白名单 CORS_ORIGIN_WHITELIST = ( 'http://localhost:8080', # 假设这是Vue的应用地址 ) ``` 对于Vue前端而言,默认情况下它会在本地启动于8080端口上运行的服务实例[^3]。因此上述配置即指定了允许从这个特定位置发出的请求。 #### 调整Vue前端Axios默认参数 为了让Vue前端能顺利地发送带有凭证(cookie等)的信息给Django后端,还需要修改axios客户端的相关属性。可以在创建API实例时设定这些选项: ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'http://127.0.0.1:8000/', withCredentials: true, }); ``` 以上措施共同作用下,就能有效解决Django和Vue间存在的域问题,使得两者能够在不同的主机名/端口号条件下正常通信[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值