Vue，Django前后端分离实现跨域和携带cookie问题

一心萝卜

已于 2023-07-15 21:01:51 修改

阅读量1.9k

点赞数

分类专栏： Python-Django 文章标签： vue.js django 前端

于 2020-03-18 14:18:20 首次发布

本文链接：https://blog.csdn.net/yixinluobo/article/details/104943646

版权

本文介绍了如何在Vue.js前端应用中使用axios处理跨域问题，并在Django后端配置corsheaders中间件以允许携带cookie。在Vue的main.js文件中配置axios以默认携带cookie，同时在Django的settings.py中逐步设置CORS_ORIGIN_ALLOW_ALL、CORS_ORIGIN_WHITELIST和CORS_ALLOW_METHODS等参数，确保跨域请求的安全性和可控性。

摘要由CSDN通过智能技术生成

在前端Vue的main.js文件中引入axios,并让ajax默认携带cookie：

// 引入Axios
import axios from 'axios'
axios.defaults.withCredentials=true; //让ajax携带cookie
Vue.prototype.$http=axios
axios.defaults.baseURL = 'http://127.0.0.1:8000' //初始化基础地址

后端：

1. 添加第三方库 `pip install django-cors-headers`
2. 在`settings.py` 中 INSTALLED_APPS 下添加一个 corsheaders
```
INSTALLED_APPS = [
....
'corsheaders',
]
```
3. 在`settings.py` 中 Midddleware 中，添加对应的中间件（注意顺序，不然有可能无效。）
```
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
```
4. 在`