django + vue.js 解决跨域问题

浏览器跨域报错:"No: Access-Control-Allow-Origin":

 解决方案1:

     在view视图函数中 给封装好的list_查看这个方法这个函数给父类

clss Oldboy (ModelViewset):
        queryst =Course.objects.all()
        serializer_Class =CoureSerializer

def  list(self,request,*args,**kwargs)
       response = super().list(request,*args,**kwargs)#     respones["No: Access-Control-Allow-Origin"] ="*"  #{在 ="*"这里可以写为本地地址:http://localhost:端口}                                  如果输入本地地址报错 还需要改为="*"    return respones

问题这样写的话 如果后台每次的方法中都需要这个操作传过值,那以后 都得一个一个往进添加 这个跨域报错这样会出现代码冗余:

所以有了解决作用域2:

        把每次前端向 后端请求的url地址 跨域报错都放到中间件重,项目再起来的时候 直接把跨域报错通过中间件掠过,

      操作中间件的模块在setings中拿到 from django.utils.deprecation import MiddlewareMixin

      操作代码:

          

from django.utils.deprecation import MiddlewareMixin
class corsMiddleware(MiddlewareMixin) 继承 MiddlewareMixin
  def process_reponse(self,request,reponse):
         respones["Access-Control-Allow-Origin"] ="*"
        return response

写完中间件后 在seetings中 中间件MIDDLEWARE最后一行加入  增加中间件这个类的目录名称和类名:‘app01.middlwares.cors.corsMiddleware‘

中间件 普通的—跨域 之 中间件—复杂跨域:

  OPTTONS 是针对ajax 发送methon的中data接受时herard请求头时候那不搭配Content-type字符串类型 所以转为json数据格式后

   后请求头herdl 不支持 非json 格式所以需 需要content——Type 进行序列号

  

      

    

原文地址:https://www.cnblogs.com/jsp0/p/9280557.html

时间: 2024-10-10 16:20:02

django + vue.js 解决跨域问题的相关文章

vue中解决跨域问题

方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 方法2.使用JQuery提供的jsonp methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', data

js解决跨域问题

JavaScript中的常见解决跨域的方法 1. 通过jsonp跨域 1.)原生实现: 2. document.domain + iframe跨域 此方案仅限主域相同,子域不同的跨域应用场景. 1.)父窗口:(http://www.domain.com/a.html) 2.)子窗口: (http://child.domain.com/b.html) 3. nginx代理跨域 4. nodejs中间件代理跨域 5. 后端在头部信息里面设置安全域名   原文地址:https://www.cnblog

vue cli 解决跨域 线上 nginx 反向代理配置

前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true, proxyTable: { '/api':{ target:'http://xx.xx.xx.xx:5568', changeOrigin:true, pathRewrite:{ '^/api':'/api' } } }, 2. npm run buil

Springboot vue.js html 跨域 前后分离 shiro权限 集成代码生成器

本代码为 Springboot vue.js  前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ mybaits+maven+接口 前端页面:html +vue.js 形式 jquery ajax 异步跨域 json 格式数据交互 前后分离,前后台分开部署 (特别注意,前端用的vue.js,  就是html页面引入vue.js形式, 用tomcat部署运行,更适合后台开发者) 1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)

springcloud 项目源码 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离

1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2.多数据源:(支持同时连接无数个数据库,可以不同的模块连接不同数的据库)支持N个数据源3.阿里数据库连接池druid,安全权限框架 shiro(菜单权限和按钮权限), 缓存框架 ehcache4.代码编辑器,在线模版编辑,仿开发工具编辑器5.调用摄像头拍照 自定义裁剪编辑头像,头像图片色度调节6.we

解决跨域问题以及Django中POST传递参数错误

一.跨域 在进行前后端开发的时候需要涉及到跨域的问题,跨域既可以在前端解决也可以在后端解决.前段解决的思路就是转换路径,将发出的请求的url地址转换成可以映射成的地址.后端的解决思路是将获取的地址转换成可以映射的地址. 1. 模型 1.1 前端跨域解决的模型 由于路由router的不同,因此在跨域请求的时候通过更换请求源为origin再对后端进行请求 1.2 后端跨域解决的模型 后端通过可接收的url来进行相同path的处理,揭示了前后端分析的关键点以及跨域解决的本质,即对相同的path进行不同

Django 【第二十篇】后端CORS解决跨域问题

一.为什么会有跨域问题? 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 二.解决跨域问题的两种方式 JSONP CORS 三.JSONP 先简单来说一下JSONP,具体详细详见上面JSONP JSONP是json用来跨域的一个东西.原理是通过script标签的跨域特性来绕过同源策略.(创建一个回调函数,然后在远程服务上调用这个函数并且将json数据形式作为参数传递,完成回调). 四.CORS跨域 随着技术的发展,现

vue webpack配置解决跨域问题

现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 http.js post (url, data) { return axios({ method: 'post', baseURL: '/api', url, data: data, timeout: 10000, headers: { 'X-Requested-With': 'XMLHttpRe

前后端分离,解决跨域问题及django的csrf跨站请求保护

1. 前后端分离解决跨域问题 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现: 关于跨域,前端会先发送OPTIONS请求,进行预检,检查后端是否允许前端设置的相应的请求头,请求内容 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie