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

原创已于 2023-07-15 21:01:51 修改 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #django #前端

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

Python-Django 专栏收录该内容

26 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端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. 在`settings.py` 中设置跨域的基本参数
- CORS_ORIGIN_ALLOW_ALL ：默认是False, 如果为 True，则允许所有网站跨域
- CORS_ORIGIN_WHITELIST ：设置允许跨域的网站，添加白名单，如果CORS_ORIGIN_ALLOW_ALL 设置为 True,白名单则失效
- CORS_ALLOW_METHODS : 跨站资源共享允许那些请求方式，默认是允许所有的请求方式

5.跨域增加忽略

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
)

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',
    'Cookie',
)

欢迎关注wx公众号：python web小栈，共同探讨学习