flask-vue 解決跨域問題

今天因為同學項目的問題，重新看了一下之前代碼的跨域問題的解決方式，也查閱了很多資料，整理記錄一下。

問題：

當客戶端向服務器端請求ajax服務時，如果客戶端和服務器端域名不一致，就會出現跨域問題，ajax報錯：No 'Access-Control-Allow-Origin' header is present on the requested 。

解決跨域(全局配置)：

1、通過引入Cors包解決跨域：

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
if __name__ == "__main__":
    app.run()

CORS參數說明

 

參數	類型	Head字段	說明
resources	字典、迭代器或字符串	無	全局配置允許跨域的API接口
origins	列表、字符串或正則表達式	Access-Control-Allow-Origin	配置允許跨域訪問的源， *表示全部允許
methods	列表、字符串	Access-Control-Allow-Methods	配置跨域支持的請求方式， 如：GET、POST
expose_headers	列表、字符串	Access-Control-Expose-Headers	自定義請求響應的Head信息
allow_headers	列表、字符串或正則表達式	Access-Control-Request-Headers	配置允許跨域的請求頭
supports_credentials	布爾值	Access-Control-Allow-Credentials	是否允許請求發送cookie， false是不允許
max_age	整數、字符串	Access-Control-Max-Age	預檢請求的有效時長

 

2、在被請求的Response header中加入header

from flask import Flask

def after_request(response):
    response.headers['Access-Control-Allow-Origin'] = request.headers.get('Origin') or 'http://127.0.0.1:9528'
    response.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
    response.headers['Access-Control-Allow-Headers'] = 'Content-Type,Authorization,Accept,Origin,Referer,User-Agent'
    response.headers['Access-Control-Allow-Credentials'] = 'true'
    return response


app = Flask(__name__)
app.after_request(after_request)

if __name__ == "__main__": 
　　app.run()