文档章节

AngularJS + Flask 通过 CORS 实现跨域方案

兔之
 兔之
发布于 2015/12/11 10:12
字数 268
阅读 1256
收藏 0

通过CORS实现跨域基本上完全由后端实现,本质让服务器通过新增响应头 Access-Control-Allow-Origin,通过 HTTP 方式来实现资源共享,让每个请求的服务直接返回资源。它使用了HTTP交互方式来确定请求源是否有资格请求该资源,并且通过设置HTTP Header来控制访问资源的权限。

AnglarJS 前端侧

<div class="topic">
            <div ng-app="myApp" ng-controller="customersCtrl">
                <ul>
                    <li ng-repeat="ele in topics">
                        {{ ele.title + '| ' + ele.followers }}
                    </li>
                </ul>
            </div>
        </div>

        <script>
		var app = angular.module('myApp', []);
		app.controller('customersCtrl', function($scope, $http) {
  		$http.get("http://localhost:5000/toptopic/api/topics")
  		.success(function (response) {$scope.topics = response.topics;});
		});
		</script>  

AngularJS 使用 http.get 正常发出请求。

Python Flask 后台侧

from flask.ext.cors import CORS

# 提供给 js AJax 调用的 CGI

app = Flask(__name__)
CORS(app)

data = DataInfo()
topics = data.get_top_topic_these_days()

@app.route('/toptopic/api/topics', methods=['GET'])
def get_tasks():
    return jsonify({'topics': topics})

@app.errorhandler(404)
def not_found(error):
    return make_response(jsonify({'error': 'Not found'}), 404)

if __name__ == '__main__':
    app.run(debug=True)

查看请求头,可以看到多了一个 Access-Control-Allow-Origin 字段。

输入图片说明

这样就可以实现跨域访问请求数据了。

参考

http://segmentfault.com/a/1190000000718840

http://my.oschina.net/blogshi/blog/303758

© 著作权归作者所有

共有 人打赏支持
兔之
粉丝 67
博文 247
码字总数 95896
作品 7
深圳
程序员
私信 提问
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
Angular通过CORS实现跨域方案

以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了,有一些比如document.domain还有ifram...

顽Shi
2014/08/18
0
16
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
AngularJS跨域问题 ajax 跨域

先看代码: 一:案例实现 从网上下载了一个AngularJS项目,配置启动后发现数据发送不到自己的后台中去,总是提示跨域问题。 下面是AngularJS的部分代码: <!DOCTYPE html PUBLIC "-//W3C//D...

simpower
2017/12/13
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka+Flink 实现准实时异常检测系统

1.背景介绍 异常检测可以定义为“基于行动者(人或机器)的行为是否正常作出决策”,这项技术可以应用于非常多的行业中,比如金融场景中做交易检测、贷款检测;工业场景中做生产线预警;安防...

架构师springboot
12分钟前
1
0
DecimalFormat 类基本使用

/* * DecimalFormat 类主要靠 # 和 0 两种占位符号来指定数字长度 * 0 表示如果位数不足则以 0 填充 * # 表示只要有可能就把数字拉上这个位置 * */ public static void main(String[] args){...

嘴角轻扬30
29分钟前
3
0
This APT has Super Cow Powers.

在Debian/Ubuntu上,apt包管理器内嵌着一个彩蛋. 如果你在命令行界面输入 apt help 在最后一行能找到This APT has Super Cow Powers. 说明该apt具有超级牛力 牛力是个什么梗? 则说明你的系统...

taadis
46分钟前
2
0
起薪2万的爬虫工程师,Python需要学到什么程度才可以就业?

爬虫工程师的的薪资为20K起,当然,因为大数据,薪资也将一路上扬。那么,Python需要学到什么程度呢?今天我们来看看3位前辈的回答。 1、前段时间快要毕业,而我又不想找自己的老本行Java开发...

糖宝lsh
55分钟前
6
0
携手开发者共建云生态 首届腾讯云+社区开发者大会在京举办

本文由云+社区发表 北京时间12月15日,由腾讯云主办,极客邦科技、微信、腾讯TEG协办的首届腾讯云+社区开发者大会在北京朝阳悠唐皇冠假日酒店举办。在会上,腾讯云发布了重磅产品开发者平台以...

腾讯云加社区
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部