django rest jwt vue 跨域问题

简介:

django rest jwt vue 跨域问题

跨域报错信息: Failed to load http://127.0.0.1:8200/api/jwt-auth/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9528' is therefore not allowed access.

跨域:

简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。这显然是不安全的。为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源策略。现在所有支持JavaScript的浏览器都会使用这个策略。

同源:

域名、协议、端口均相同的网站即为同源。

流程:

当一个浏览器的两个Tab页分别打开百度和谷歌页面时,百度发起一个脚本执行,此时浏览器会检查该脚本属于哪个页面。即检查是否同源。只有和百度同源的脚本才会被执行。若非同源,在请求数据时,浏览器会在控制台报一个异常。提示拒绝访问。

解决方法:

  1. 安装django-cors-headers
    pip install django-cors-headers
  1. settings.py配置
    INSTALLED_APPS = [
    
        ...
    
        "corsheaders",
    
    ...
    
    ]
    
     
    
    MIDDLEWARE_CLASSES = (
    
        ...
    
    "corsheaders.middleware.CorsMiddleware",
    
    "django.middleware.common.CommonMiddleware",  # 注意顺序
    
    ...
    
    )
    
    # 跨域增加忽略
    
    CORS_ALLOW_CREDENTIALS = True
    
    CORS_ORIGIN_ALLOW_ALL = True
    
    CORS_ORIGIN_WHITELIST = (
    
        "*"
    
    )
    
     
    
    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",
    
    )

本文来自云栖社区合作伙伴“开源中国”

本文作者:_Change_ 

原文链接

相关文章
|
5月前
|
存储 JSON JavaScript
Vue开发中Jwt的使用
Vue开发中Jwt的使用
|
6月前
|
JSON 算法 安全
Django JWT验证
Django JWT验证
121 0
|
2月前
|
前端开发 关系型数据库 MySQL
基于python+django+vue.js开发的社区养老管理系统
基于python+django+vue.js开发的社区养老管理系统
92 1
|
13天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
2月前
|
前端开发 关系型数据库 MySQL
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
52 0
QGS
|
3月前
|
存储 JSON 算法
浅学JWT跨域认证
浅学JWT跨域认证
QGS
24 0
|
3月前
|
JSON 安全 算法
JSON Web Token(缩写 JWT) 目前最流行、最常见的跨域认证解决方案
JSON Web Token(缩写 JWT) 目前最流行、最常见的跨域认证解决方案
143 0
|
3月前
|
安全 JavaScript 搜索推荐
【实测】记一次用windows11家庭中文版部署django+vue项目的踩坑之旅
【实测】记一次用windows11家庭中文版部署django+vue项目的踩坑之旅
|
4月前
|
JavaScript 前端开发 安全
Vue面试题之跨域问题的解决
Vue面试题之跨域问题的解决
47 0
|
4月前
|
JSON API 网络架构
Python Web 开发: 解释 Django REST framework 的作用,以及如何定义序列化器(Serializer)?
Python Web 开发: 解释 Django REST framework 的作用,以及如何定义序列化器(Serializer)?