angularjs flask跨域问题 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'

场景，我要来我的server（A）上用api来访问另一个server（B）的问题，如果直接在A上调用B的api，那么就会出现XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin' 的问题，google了很多才知道跨域的问题。

在众多站群中，不同功能的系统使用独立的一个域名，各系统之间存在相互调用的关系。使用js的XMLHttpRequest调用其他域名提示跨域权限不足。有些可能认为都同属于同一个顶级域名或者说域名一模一样怎么会存在跨域问题.

先来看下错误
“XMLHttpRequest cannot load http://comment.ttlsa.com/api/post?id=1&msg=123123123&code=453423&username=凉白开 Origin http://www.ttlsa.com is not allowed by Access-Control-Allow-Origin.”

什么是Access-Control-Allow-Origin
Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header，用来解决资源（比如字体）的跨域权限问题。
它定义了该资源允许被哪个域引用，或者被所有域引用（google字体使用*表示字体资源允许被所有域引用）。

什么是资源跨域权限
先来看看同域和不同域的长相
相同域
http://www.ttlsa.com/
http://www.ttlsa.com/nginx

不同域
http://www.ttlsa.com
http://bbs.ttlsa.com
https://www.ttlsa.com
http://www.ttlsa.com:8080

由此可见，相同域必须忙住协议相同、端口相同、域名相同. 只要其中一点不满足那就是跨域

跨域案例
站点www.ttlsa.com需要调用comment.ttlsa.com/api/post.php,那么这个post.php必须加上如下代码

header("Access-Control-Allow-Origin: http://www.ttlsa.com");

好了，现在我在angularjs上想访问另一个server的api，就需要先在B上设置cors

我的B的server是用flask写的，所以先

pip install -U flask-cors

然后更新代码

from flask import Flask
from flask.ext.cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

　　

在A的server的angularjs使用$http访问B的api：

MustangApp.controller("IndexLoginController", function($scope, $state, $window, $http) {

        $http.post('http://B_server_ip:8080/api/token/',{ 'email': "bjwbin@cn.ibm.com", 'password': "mypass" }
        ).success(function(data, status, headers, config) {
            console.log('yes cors');
            console.log(data);
        }).error(function(data, status, headers, config) {
            console.log('no');
            console.log(data);
        });
    }
});

　　

这样就能够访问成功啦

参考资料：

http://flask-cors.readthedocs.org/en/latest/

https://www.ttlsa.com/php/xmlhttprequest-cannot-load/