文档章节

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

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

精选30+云产品,助力企业轻松上云!>>>

通过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

兔之

兔之

粉丝 71
博文 250
码字总数 96477
作品 7
深圳
程序员
私信 提问
加载中
请先登录后再评论。
Angular通过CORS实现跨域方案

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

顽Shi
2014/08/18
3.4W
16
Angular 应用解决跨域访问的问题

在前后台分离的应用中,Angular 与 Java 是一对好搭档。但是如果是分开部署应用,则势必会遇到跨域访问的问题。 什么是跨域 启动应用之后,有些浏览器会提示如下告警信息: 这个是典型的跨域...

waylau
2018/12/21
0
0
Angular 应用解决跨域访问的问题

在前后台分离的应用中,Angular 与 Java 是一对好搭档。但是如果是分开部署应用,则势必会遇到跨域访问的问题。 什么是跨域 启动应用之后,有些浏览器会提示如下告警信息: 这个是典型的跨域...

waylau
2018/12/21
534
0
AngularJS跨域问题 ajax 跨域

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

simpower
2017/12/13
52
0
Requests blocked by CORS policy in spring boot and angular

在本地启动Spring Boot后端和Angular前端调试时遇到跨域访问的问题导致前端请求失败。 错误描述 Access to XMLHttpRequest at 'http://localhost:8080/...' from origin 'http://localhost:......

osc_uv42f7cs
2019/03/25
1
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-07-14

更新时间: 2020-07-14 01:01 I Know What You Download on BitTorrent - (iknowwhatyoudownload.com) 我知道你在BitTorrent上下载了什么 得分:196 | 评论:159 Show HN: Primo – all-in-one......

FalconChen
今天
114
0
绕过移动端系统限制的 dlopen 库 byOpen

byOpen是一个绕过移动端系统限制的增强版dlfunctions库。 支持特性 Android 支持App中加载和使用Android系统库接口(即使maps中还没有被加载也支持)。 Android 7以上dlopen, System.load都是...

shzwork
昨天
25
0
Golang学习系列第二天:变量、常量、数据类型和流程语句

继golang第一天后,今天学习下golang的变量、常量、数据类型和控制流语句。 做过其他编程语言(比如JavaScript,java,python)项目的话,其实很好理解变量、常量、数据类型和控制流。 变量也...

董广明
昨天
48
0
redis系列之——一致性hash算法

一致性hash算法你了解吗?什么时候使用?解决什么问题?redis集群模式使用了一致性hash算法了吗? 数据分片(sharding) 分布式数据存储时,经常要考虑数据分片,避免将大量的数据放在单表或...

诸葛小猿
昨天
15
0
IMDB是否提供API? [关闭] - Does IMDB provide an API? [closed]

问题: I recently found a movie organizer application which fetches its data from the IMDB database . 最近,我发现了一个电影管理器应用程序,该应用程序从IMDB数据库中获取其数据。 ...

fyin1314
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部