Django跨域配置

Django跨域配置

1.安装django-cors-headers

pip install django-cors-headers

2.配置settings.py文件

添加应用

INSTALLED_APPS = [
    'corsheaders',
]

添加中间件

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

其他配置

# 配置允许跨站访问本站的地址
CORS_ORIGIN_ALLOW_ALL = True
# CORS_ORIGIN_WHITELIST = (
#     'localhost:8000',  # 请求的域名(此处仅在CORS_ORIGIN_ALLOW_ALL = False时有效)
# )

# 定义允许的匹配路径正则表达式
CORS_URLS_REGEX = '^.*$'

# 设置允许访问的方法
CORS_ALLOW_METHODS = (
    'GET',
    'POST',
    'PUT',
    'PATCH',
    'DELETE',
    'OPTIONS',
)

# 跨域允许证书
CORS_ALLOW_CREDENTIALS = True

# 设置允许的header
CORS_ALLOW_HEADERS = (
    'Klicen-Agent',
    'Content-Type',
    'X-Requested-With',
    'xyt-agent',
)
### 配置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、付费专栏及课程。

余额充值