[flask] flask api + vue 跨域問題

問題

使用flask提供json數據，用vue在前端獲取json數據展示。

發現無法獲取到該json數據，但其它網站的api的json數據是可以拿到的。

解決

后來，查到是由於遇到跨域請求的問題，通過設置flask允許其它域訪問即可。

域 = 協議名 + 主機名 + 端口號

禁止不同域的訪問是為了防止CSRF(跨站請求偽造)攻擊。

通過CORS(跨源資源共享)允許的請求。

添加如下語句開啟允許訪問的資源：

CORS(app, resources=r'/*')

示例

demo.py

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources=r'/*')

@app.route('/')
def hello_world():
    return {'hello': 'world!'}

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

test.html

<div id="app">
    <h2>
        ----
        {{info}}
    </h2>
</div>

<script src="https://unpkg.com/vue"></script>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            info:''
        },
        created() {
            fetch('http://127.0.0.1:5000')
            .then(response => response.json())
            .then(json => {
                this.info = json
            })
        },
    })
</script>

PS

同理，不僅是flask會出現跨域請求的問題，其它語言為了安全性，也是有禁止跨域請求的。