用CORS 解决vue.js django跨域调用

Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好。另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

引入 django-cors-middleware

pip install django-cors-middleware
在 settings.py中添加,注意:不添加的话无法生效

INSTALLED_APPS = (
...
‘corsheaders‘,
)
添加 中间件 监听

MIDDLEWARE = [
...
‘corsheaders.middleware.CorsMiddleware‘,
‘django.middleware.common.CommonMiddleware‘,
...
]
配置允许跨域访问的域名

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
‘google.com‘,
‘hostname.example.com‘
)
默认值是全部:

CORS_ORIGIN_WHITELIST = ()
或者定义允许的匹配路径正则表达式.

CORS_ORIGIN_REGEX_WHITELIST = (‘^(https?://)?(\w+.)?>google.com$‘, )
默认值:

CORS_ORIGIN_REGEX_WHITELIST = ()
设置允许访问的方法:

CORS_ALLOW_METHODS = (
‘GET‘,
‘POST‘,
‘PUT‘,
‘PATCH‘,
‘DELETE‘,
‘OPTIONS‘
)
设置允许的header:

默认值:

CORS_ALLOW_HEADERS = (
‘x-requested-with‘,
‘content-type‘,
‘accept‘,
‘origin‘,
‘authorization‘,
‘x-csrftoken‘
)

原文地址:http://blog.51cto.com/aaronsa/2071108

时间: 2024-08-24 23:42:41

用CORS 解决vue.js django跨域调用的相关文章

js Ajax跨域调用JSON并赋值全局变量

//跨域调用JSON <script type="text/javascript"> function _callback(obj) { alert(obj); } jQuery(document).ready(function(){ $.ajax({ type : "get", async:true, url: "http://www.xxx.com/api/token/getcode", dataType : "json

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

js ajax跨域被阻止 CORS 头缺少 &#39;Access-Control-Allow-Origin&#39;(转)

今天ajax请求域名的时候出现 已阻止跨源请求:同源策略禁止读取位于 http://www.zuimeimami.com*****的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin'). 解决办法1: var url='http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?'; $.ajax({ url:url, dataType:'

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

js 利用iframe和location.hash跨域解决办法,java图片上传回调JS函数跨域

奶奶的:折腾了我二天,终于解决了!网上有很多例子. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 测试通过 js :这个主页面,部分代码, function submitUpload(id){ $("#imgSrc" + id +"").attr("alt", "图片上传中--"); var imgID = id; if(id>0){ imgID = 1; } var for

ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前端域名为front.ls-la.me,后端域名为api.ls-la.com.前端需要访问的接口为http://api.ls-la.com/user/info.json,需要用GET方式访问. 现在,用Ajax向后端发送请求,得到第一个错误.(cors跨域的写法参考:http://blog.csdn.

Vue-cli proxyTable 解决开发环境的跨域问题(转)

Vue-cli proxyTable 解决开发环境的跨域问题 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名.今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy

如何通过js跨域调用ASP.NET Web API (请问如何实现在javascript中通过http get的方式跨域调用ASP.NET Web API?)

客户端js无需任何专门设置,使用通常的ajax调用即可: $.ajax({ url: '跨域URL', type: 'get', dataType: 'json', success: function (data) { $('#banner_right').html(data); } }); 服务端需要在WebApiConfig.Register()中添加如下的代码 public static class WebApiConfig { public static void Register(Ht