django+vue跨域问题：Access to XMLHttpRequest at No ‘Access-Control-Allow-Origin‘ header is present on the

阿波拉

于 2024-09-12 16:52:17 发布

阅读量635

点赞数 8

CC 4.0 BY-SA版权

分类专栏：疑难杂症 Django Vue 文章标签： django vue.js python

本文链接：https://blog.youkuaiyun.com/laosao_66/article/details/142180434

疑难杂症同时被 3 个专栏收录

56 篇文章

订阅专栏

Vue

15 篇文章

订阅专栏

Django

5 篇文章

订阅专栏

跨域问题牵涉到浏览器的同源策略，为什么浏览器要同源，究其原因是因为浏览器的一种安全机制
同源策略这种安全机制要求网页中的JavaScript代码只能与加载该网页的同一个源（协议、域名和端口号都相同）进行交互，比如在没有设置可跨域的情况下，vue3.x项目默认本机访问url是http://127.0.0.1:5173，而假设使用网络请求服务端接口地址是http://127.0.0.1:8080这样就出现了跨域问题，为什么呢请往下看？
我们知道如下情况皆为跨域：
域名不同：网页的域名与请求的资源的域名不同(或者服务器ip)。
协议不同：网页使用的协议（如HTTP或HTTPS）与请求的资源的协议不同。
端口号不同：网页的端口号与请求的资源的端口号不同。
很明显8080与5173端口不一样，这也是跨域。

CORS（跨域资源共享）：CORS允许服务器声明哪些源（域、协议和端口）有权限访问其资源。服务器可以通过设置响应头来允许指定的源进行跨域访问。CORS是目前最常用的解决跨域问题的方法。
案例: Django+Vue跨域问题的解决:

1、首先你要先安装django-cors-headers 这个包

pip install django-cors-headers

2、配置settings.py

安装app

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01'#刚才安装的django-cors-headers包所引入的app
    'corsheaders'
]

配置必要参数

#开启debug模式，注意上线运营时要关闭debug
DEBUG = True
# 允许所有ip访问
ALLOWED_HOSTS = ['*']
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
#允许所有的请求头
CORS_ALLOW_HEADERS = ('*')

配置必要中间件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', #注意顺序，必须放在这儿
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware', #最后一个也必须放在这儿
]