python vue+flask 跨域请求

刚部署好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’”，表示允许的请求头

阮一峰-跨域资源共享 CORS 详解

具体代码：
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