刚部署好vue,vue作为前端,flask作为后端,在开发、测试的时候不配置nginx的时候,使用不同端口启动flask、vue,然后使用跨域请求交换数据(也可使用jsonp),在前端和后端分别允许跨域请求
在请求时加入Access-Control-Allow-Origin
请求头,一般为“*”,或发起方的地址(协议、域名、端口),如:“http:127.0.0.1:8080”
服务器响应时加入Access-Control-Allow-Headers
、Access-Control-Allow-Origin
响应头,Access-Control-Allow-Headers
的值为“‘Access-Control-Allow-Origin,Content-Type’”,表示允许的请求头
具体代码:
vue:
const path = 'http://localhost:5001/';
axios
.get(path, {headers: {"Access-Control-Allow-Origin": "*"}})
.then(res => {
console.log(' 加载完成');
})
.catch(error => {
console.error(error);
console.log('加载失败');
});
flask在每个请求处理后的response中加入相应header:
from flask import make_response
headers = {
'Access-Control-Allow-Headers': 'Access-Control-Allow-Origin,Content-Type',
'Access-Control-Allow-Origin': '*',
}
return make_response(response_data, headers)
注意在flask中添加路由的时候也要加入对各个Method的支持,
GET
、POST
、OPTIONS
、PUT
、DELETE
每个请求后面添加比较麻烦,封装成装饰器后就好多了,每个请求方法加上装饰器@CORSExclude
即可
from functools import wraps
from flask import make_response
def CORSExclude(func):
"""
跨域请求支持
:param func:
:return:
"""
@wraps(func)
def wrapped_function(*args, **kwargs):
_json = func(*args, **kwargs)
headers = {
'Access-Control-Allow-Headers': 'Access-Control-Allow-Origin,Content-Type',
'Access-Control-Allow-Origin': '*',
}
return make_response(_json, headers)
return wrapped_function
顺便记一下加参数的装饰器,为:
from functools import wraps
from flask import make_response
def CORSExclude(allow='*'):
"""
跨域请求支持
:param allow: 请求发起方的地址(协议、域名、端口),可多个
:return:
"""
def decorator(func):
@wraps(func)
def wrapped_function(*args, **kwargs):
_json = func(*args, **kwargs)
headers = {
'Access-Control-Allow-Headers': 'Access-Control-Allow-Origin,Content-Type',
'Access-Control-Allow-Origin': allow,
}
return make_response(_json, headers)
return wrapped_function
return decorator