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': "[e-mail]", '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/