Flask与Ajax前后端交互的跨域访问问题

最近在对前后端接口，后台使用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'

问题解决！