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

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

通过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 字段。

输入图片说明