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()