可以在后端响应头上加上Allow-origin解决跨域问题,但是PUT和DELETE请求会变成OPTIONS请求,这时候如果后端不做处理的话,浏览器是不会再发送后续请求的
如下:
// 前端代码
$('.todos').on('click', '.cell-control', function(event) {
log('yes');
var cell = $(event.target).closest('.todo-cell');
var delId = $(cell).data('id');
log('delId', delId);
$.ajax({
type: 'DELETE',
url: 'http://127.0.0.1:5000/api/v1/todo',
success: function(result) {
log('res', result);
}
});
// log(cell);
// cell.remove();
})
# 后端代码
@app.route('/api/v1/todo', methods=['DELETE'])
def deleteTodo():
headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
# 'Access-Control-Allow-Methods': 'DELETE'
}
return make_response((jsonify({'error_code': 0}), 202, headers))
请求失败:
解决办法:在后端路由允许的请求方法中增加OPTIONS方法,在响应头增加’Access-Control-Allow-Methods’字段,并设置其值为具体方法,如PUT或DELETE,这样浏览器就知道后端是支持这个方法的,就会发起具体的PUT或DELETE请求。
# 修改后的后端代码
@app.route('/api/v1/todo', methods=['DELETE', 'OPTIONS'])
def deleteTodo():
headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'DELETE'
}
return make_response((jsonify({'error_code': 0}), 202, headers))