vue+django跨域问题的学习

最新推荐文章于 2024-09-22 21:21:16 发布

utoui

最新推荐文章于 2024-09-22 21:21:16 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： python django 后端 vue.js 前端

本文链接：https://blog.csdn.net/utoui/article/details/113474961

笔记专栏收录该内容

26 篇文章

订阅专栏

在Vue项目中遇到axios请求数据时的跨域问题，错误信息提示缺少'Access-Control-Allow-Origin'头。解决方法包括：安装django-cors-headers，配置settings.py的MIDDLEWARE和INSTALLED_APPS，定义CORS_URLS_REGEX、CORS_ALLOW_METHODS和CORS_ALLOW_HEADERS，最终成功实现数据请求。

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

在vue中进行axios请求数据的数据是弹出错误信息

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

出现了跨域问题

解决方法：

第一步：

安装django-cors-headers

pip3 install django-cors-headers

第二步：

在setting.py文件中的：
MIDDLEWARE添加corsheaders.middleware.CorsMiddleware

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    ......
]

第三步：

在INSTALLED_APPS里添加corsheaders

INSTALLED_APPS = [
    .....
    'corsheaders',
    .....
]

第四步：

在最后加入：

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

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

# 设置允许的header
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)