最近在对前后端接口,后台使用Flask写的部署在服务器上,前端用ajax与后台交互,遇到了跨域访问的问题:
一直提示没有Access-Control-Allow-Origin
然后查找解决办法,有两种:
一是把数据类型换成jsonp,这样确实没有了跨域访问的问题:
$.ajax({
type:'POST',
url:'127.0.0.1:5000',
data:data,
dataType:'jsonp',//改成了jsonp格式,解决了跨域访问的问题
success:function(data){
console.log(data)
}
但采用jsonp格式在返回数据的时候还要提供一个回调函数(这里不再描述),另外jsonp只能采用GET方法,即使你写成POST,它采用的还是GET,这就带来安全性上的问题,因此这种方式不推荐。
二是在后台返回的相应中添加响应头,即:
res = flask.make_response()
res.headers['Access-Control-Allow-Origin'] = '*'
res.headers['Access-Control-Allow-Methods'] = 'POST,GET,OPTIONS'
res.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
但是在添加了上述响应头之后,还是提示没有Access-Control-Allow-Origin,貌似是前端没有收到响应。查了好多办法都没有解决,最后发现问题所在:异步请求
ajax在与后台通信时采用了异步请求的方式,而且貌似是在代码里把异步请求async改为false都没有用,跨域的时候默认采用异步请求,在异步请求方式下,第一次‘握手’,发送的是空数据,因此data=request.data解析不了数据,导致make_response(data)没有返回响应,这样前端也就收不到响应头信息了。
解决办法:
if request.method == 'OPTIONS':
res = flask.make_response()
if request.method == 'POST':
data = request.data
data = json.loads(data)
......
res = flask.make_response(data)
res.headers['Access-Control-Allow-Origin'] = '*'
res.headers['Access-Control-Allow-Methods'] = 'POST,GET,OPTIONS'
res.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
return res
另外要注意前端代码中
data: data//data是json格式的字符串数据
具体可以采用JSON.stringify(data)来讲json数据data转换为字符串形式
还有就是content-Type写明是json格式:
Content-Type: 'application/json'
问题解决!