django模板下，vue的使用（前后端不分离）

最新推荐文章于 2025-04-23 11:58:16 发布
最新推荐文章于 2025-04-23 11:58:16 发布
阅读量2.6k 收藏 10
点赞数 11
分类专栏： 工具测试 文章标签： django vue.js python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43276836/article/details/137010478
版权

目录

关于django+vue的结合使用

网上的相关教程基本上都是部署node.js,npm安装vue，生成vue项目，然后将vue项目部署至django，这些教程基本都建立在一个前提下，即前后端分离，关于前后端分离相关知识请自行搜索了解，简单来说就是对django服务器的请求，django的视图函数只返回json格式的字符串数据，这时候为了避免歧义，可以新建一个api.py代替原本views.py的导入。

然而我们在学习django的时候，通常都是views+templates的模式，很遗憾这是典型的前后端不分离的模式，当你想实现一些前端框架能够简单实现的炫酷效果时，你不可避免的想在你的前端页面设计中引入vue框架。因此，这篇教程将会告诉你如何方便快捷的直接在html中引用vue，而不是重构为前后端分离的模式去部署。当然前后端分离是大势所趋。

一、在你的templates中引入vue.js

目前最新的vue版本是vue3，在vue3中你是找不到vue.js的，取而代之的是vue.global.min.js文件
在你的模板文件中，一般是base_generic.html文件中进行cdn的外部引用，这里建议将最新版本的jquery一起引用。

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue
最低0.47元/天 解锁文章
Allow CORS: Access-Control-Allow-Origin插件安装与使用教程【Chrome插件小白式教程】
谙忆-陈浩翔
01-14 1万+
Allow CORS: Access-Control-Allow-Origin插件安装与使用教程【Chrome插件小白式教程】 文章目录插件介绍插件下载CSDN论坛下载地址官方的下载地址ZIP包安装插件开关与使用测试是否开启成功注意点关闭插件卸载插件 插件介绍 解决Chrome浏览器跨域的问题，2021年1月14日，确保能用。 QQ群：819539788 插件下载 CSDN论坛下载地址 官方的链接，可能会有朋友无法下载，别方，我准备了国内的下载地址： 关注微信公众号获取下载地址。 回复关键字：chrome
跨源资源共享（CORS）Access-Control-Allow-Origin
Mr. David 专栏
09-04 891
好啦，jsonp的原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入，有种回调的味道！服务器：诶，你是谁，我来看看你的origin，嗯嗯，可以，符合我的要求，放行！没错，就是这家伙干的，浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。，标识允许哪个域的请求。，浏览器也不会理，并且即使有目标站点的cookies，浏览器也不会发送。返回的是满足服务器要求的所有请求方式，请求头，不限于该次请求，
Allow CORS: Access-Control-Allow-Origin插件使用
小新没有蜡笔的博客
11-04 1万+
Allow CORS: Access-Control-Allow-Origin插件使用
Access-Control-Allow-Origin 后端跨域问题解决
最新发布
qq_72926146的博客
04-23 745
Access-Control-Allow-Origin 问题解决
CORS使用Access-Control-Allow-Origin来允许跨域请求
低调哥的博客
03-29 3544
CORS使用Access-Control-Allow-Origin来允许跨域请求 因为浏览器的同源策略，浏览器只允许请求当前域的资源，而对其他域的资源以不信任的态度处理。JSONP是可以解决跨域的一些问题， 但JSONP只支持GET请求而不支持POST，因此还是有限，而使用Access-Control-Allow-Origin可以应对各种跨域请求（在服务器端nginx去配置）。 CORS全称跨域资源共享（Cross-origin resource sharing）,这是W3
Allow CORS: Access-Control-Allow-Origin-crx插件
04-02
语言:English 轻松添加（访问 - 控制 - 允许 - 源：*）规则到响应标头。 允许cors：访问-contogn-allize - 原点允许您轻松执行跨域Ajax Web应用程序请求。 只需激活加载项并执行请求。 默认情况下，CORS或CROSS原点资源共享在现代浏览器中被阻止（在JavaScript API中）。 安装此加载项将允许您取消阻止此功能。 请注意，当添加到浏览器时，默认情况下，它会激活（工具栏图标为灰色C字母）。 如果要激活附加品，请按下工具栏图标一次。 图标将转向橙色C字母。 如果您有一个功能请求，或者发现要报告的错误，请填写加载项的主页中的错误报告表单（https://mybrowseraddon.com/access-control-allow-origin.html）。
Allow CORS Access-Control-Allow-0.1.9.zip
12-26
允许CORS：通过Access-Control-Allow-Origin，您可以轻松地在Web应用程序中执行跨域Ajax请求。 描述： 轻松将（Access-Control-Allow-Origin：*）规则添加到响应标头。 允许CORS：通过Access-Control-Allow-Origin...
allow-cors-access-control插件
02-10
在这个例子中，`mode: 'cors'`使得请求遵循CORS规则，服务器必须返回相应的`Access-Control-Allow-Origin`头，否则浏览器会阻止返回的数据被JavaScript使用。 总结来说，“allow-cors-access-control插件”是一个...
TOMCAT 跨域 CORS Access-Control-Allow-Origin cors-filter
06-20
总的来说，了解并正确运用CORS和`Access-Control-Allow-Origin`响应头对于构建现代Web应用至关重要，因为它确保了不同源之间的数据交互安全。同时，选择合适的工具如`cors-filter`可以简化服务器端的跨域设置，提高...
allow-cors-access-control插件，解决跨域问题，内含使用教程
10-03
`allow-cors-access-control` 插件的核心功能在于启用CORS（Cross-Origin Resource Sharing），这是一种机制，它允许Web内容从不同的源加载。通过在服务器端设置特定的HTTP响应头，可以允许浏览器接受来自不同源的...
允许CORS：访问控制_-_允许来源「Allow_CORS__Access-Control-Allow-Origin」_0_1_1_0_10_18_38.zip
09-26
允许CORS：访问控制_-_允许来源 前端跨域问题 本插件解压之后直接拖到谷歌浏览器扩展程序界面 即可使用
Allow_CORS__Access-Control-Allow-Origin_0_1_1_0.zip
03-26
Allow_CORS__Access-Control-Allow-Origin
Allow-CORS_-Access-Control-Allow-Origin_v0.1.2.crx
02-27
此插件为跨域插件，打开后可跨域访问接口，旧版浏览器可直接拖到扩展程序中安装，新版浏览器需要将扩展名修改成rar并解压，然后点击“加载已解压的扩展程序”安装。 ======================插件概述谷歌译文====================== 轻松将（Access-Control-Allow-Origin：*）规则添加到响应标头。 允许CORS：通过Access-Control-Allow-Origin，您可以轻松地在Web应用程序中执行跨域Ajax请求。 只需激活插件并执行请求。默认情况下（在JavaScript API中），CORS或跨源资源共享在现代浏览器中被阻止。安装此加载项将使您可以解除阻止此功能。请注意，将插件添加到浏览器后，默认情况下它处于非活动状态（工具栏图标为灰色C字母）。如果要激活加载项，请按一次工具栏图标。图标将变为橙色的C字母。 ======================插件概述谷歌译文====================== ========================插件概述原文======================== Easily add (Access-Control-Allow-Origin: *) rule to the response header. Allow CORS: Access-Control-Allow-Origin lets you easily perform cross-domain Ajax requests in web applications. Simply activate the add-on and perform the request. CORS or Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature. Please note that, when the add-on is added to your browser, it is in-active by default (toolbar icon is grey C letter). If you want to activate the add-on, please press on the toolbar icon once. The icon will turn to orange C letter. ========================插件概述原文========================
Cors跨域(三)：Access-Control-Allow-Origin多域名？
架构师：通透，才能写出好代码！
06-21 2万+
响应头设置不合理，公司安全部门会请你喝茶
谷歌跨域插件：Allow CORS: Access-Control-Allow-Origin
weixin_48947842的博客
03-31 1万+
链接：https://pan.baidu.com/s/13TYc3wn6xOfobFwVjR4IAw 提取码：1234 crx是谷歌chrome插件的扩展格式。谷歌扩展插件安装有两种方式，在线安装和线下安装。在线安装就不多说了，主要说线下安装： 1、从设置->更多工具->扩展程序 打开扩展程序页面 2、打开扩展程序页面的"开发者模式" 3、将crx文件拖拽到扩展程序页面，完成安装 ...
跨域问题（CORS / Access-Control-Allow-Origin）(转)
a291708486的博客
03-08 776
1、前言       最近在项目中，调用Eureka REST接口时，出现了CORS跨越问题（Cross-origin resource sharing），在此与大家进行分享，避免多走些弯路。 项目前端（http://localhost:9000）通过Ajax方式调用Eureka REST 接口（http://localhost:8761/eureka/apps）时，...
【CORS】跨域资源共享解决方案＜Access-Control-Allow-Origin＞
Coding and studying
06-13 2445
要了解跨域，首先要知道一个东西：。同源策略中规定，访问服务必须在 三个层面都相同，否则就是违背同源策略，也就是。比如， 访问 是跨域，违背了同源策略中的【端口号保持一致】。 访问 是跨域，违背了同源策略中的【协议保持一致】。 访问 是跨域，违背了同源策略中的【域名保持一致】。下表列出了与 : 的源进行对比的示例：而想要跨源访问资源（服务器），就需要进行跨域——CORS。 跨源 HTTP 请求的一个例子：运行在 的 代码使用 XMLHttpRequest 来发起一个到 的请求。出于安全性，浏览器限制
计算机网络（五）什么是跨域问题（CORS）（Access-Control-Allow-Origin）（Access-Control-Allow-Credentials）
m0_58466443的博客
08-07 1530
跨域是指浏览器在请求不同源（协议、域名或端口）的资源时遇到的限制，这是浏览器的内置安全机制。跨域问题通常发生在需要访问多个后端服务的场景中。为解决这一问题，W3C制定了CORS（跨源资源共享）协议，允许服务端通过特定的响应头字段（如Access-Control-Allow-Origin）来放行特定来源的请求。 CORS协议区分简单请求和非简单请求，简单请求自动携带Origin字段，非简单请求则先发送OPTIONS预检请求。服务端需正确设置Access-Control-Allow-Methods和Access
使用谷歌插件Allow-Control-Allow-Origin解决跨域问题
热门推荐
qcg14774125的博客
08-30 6万+
由于项目需要，自己利用node.js写一些接口数据，但是项目启动时，一直都是报跨域的错，于是百度各种办法找不到原因所在，最后有幸看见一片博文，下面给大家分享一下实际有用的解决跨域的办法（当然这只是自己本地跑服务、测试用的办法） 第一步： 下载谷歌插件伴侣https://www.appinn.com/chrome-ex-assistant/ 第二步： 如果没有就去【找插件】里面去搜...
cors的Access-Control-Allow-Origin
08-28
Access-Control-Allow-Origin是CORS（跨域资源共享）中的一个关键字段。它用于确定哪些源（域）可以访问特定的资源。在CORS中，服务器通过在HTTP响应头中设置Access-Control-Allow-Origin字段来指定允许访问该资源的源。 根据引用，Access-Control-Allow-Origin的值是单数，表示只允许一个源进行访问。如果设为Access-Control-Allow-Origins，则表示允许多个源进行访问。 根据引用，可以通过设置HTTP响应头中的Access-Control-Allow-Origin字段来指定允许访问资源的源。例如，可以设置多个Access-Control-Allow-Origin字段，每个字段对应一个允许访问的源。 根据引用，Access-Control-Allow-Origin字段也可以设置为星号（*），表示允许任意跨源请求。这意味着任何源都可以访问该资源。 总结起来，Access-Control-Allow-Origin是CORS中用于确定哪些源可以访问特定资源的字段，它可以单独指定一个源，也可以设置多个源，甚至可以设置为星号表示允许任意跨源请求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Cors跨域(三)：Access-Control-Allow-Origin多域名？](https://blog.csdn.net/f641385712/article/details/117902613)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Access-Control-Allow- 设置跨域资源共享CORS详解](https://blog.csdn.net/zhangge3663/article/details/117409636)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝凡FR

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值