文档章节

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

兔之
 兔之
发布于 2015/12/11 10:12
字数 268
阅读 1179
收藏 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

© 著作权归作者所有

共有 人打赏支持
兔之
粉丝 66
博文 247
码字总数 95896
作品 7
深圳
程序员
Angular通过CORS实现跨域方案

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

顽Shi
2014/08/18
0
16
AngularJS跨域问题 ajax 跨域

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

simpower
2017/12/13
0
0
实践总结 - 不可错过的Angular应用技巧

angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸. 套用Javascript一切皆对象的思想,在angular中可以说一切皆数据. 关于项目构建 (1) requirejs以及Yeoman 在刚开始接触或者使用...

顽Shi
2014/07/21
0
22
解决jinja2和angular的花括号{{}}冲突的方法。

一共3个方法, A、http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html 上代码 app.py from flask import Flask, render_templatefrom flask.ext.triangle import Triang......

Klaus88
2015/02/17
0
1
5个示例带你学习AngularJS

本文由 伯乐在线 - 蝈蝈 翻译自 tutorialzine。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。 直到现在,你或许已经听说过AngularJS了,一个改变你对web应用思考方式,由谷歌开发的令...

冬瓜1
2013/12/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Go语言_通神之路(2)

1、包 每个Go程序都是由包构成,从main包开始运行,就是我上一篇讲到的,都是从main函数开始执行,但是必须在main包下面! package mainimport ( "fmt" "math/rand")func ...

木九天
昨天
5
0
51.php-fpm的pool 慢日志 open_basedir 进程管理

12.21 php-fpm的pool 12.22 php-fpm慢执行日志(测试时报错) 12.23 open_basedir 12.24 php-fpm进程管理 12.21 php-fpm的pool: php-fpm里的pool也叫池子,咱们之前加入过www的配置,这个w...

王鑫linux
昨天
0
0
java内存模型概述

1、Java虚拟机运行时数据分区图 程序计数器:线程私有,是一块较小的内存空间,它是当前线程所执行的字节码文件的行号指示器 java虚拟机栈:线程私有,其生命周期与线程相同,这也就是我们平...

京一
昨天
1
0
shell学习之test语法

因为if-then语句不能测试退出状态码之外的条件,所以提供了test, 如果test命令中列出的条件成立,test命令就会退出并返回退出状态码0;如果条件不成立,test命令就会退出并返回非零的退出状态...

woshixin
昨天
0
0
openJDK之如何下载各个版本的openJDK源码

如果我们需要阅读openJDK的源码,那么需要下载,那么该去哪下载呢? 现在JDK已经发展到版本10了,11已经处于计划中,如果需要特定版本的openJDK,它们的下载链接在哪呢? 1.openJDK的项目 链接...

汉斯-冯-拉特
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部