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_responseheaders = {'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_responsedef 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_responsedef 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_functionreturn decorator

python vue+flask 跨域请求相关推荐

解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
Vue ajax跨域请求*
Vue ajax跨域请求 Vue webpack-dev-server实现跨域请求思路配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量 ...
node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
axios 前端请求接口跨域问题 Vue实现跨域请求
在前端写接口请求的时候,遇到了跨域的问题.(在一个项目工程中通过接口请求另一个项目工程中的数据) 通过在线api测试 https://getman.cn或者postman接口测试工具,都能正常请求到数 ...
Vue.js跨域请求配置、Node.js设置允许跨域
Vue跨域配置在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码: // 跨域处理proxyTable: {'/api': { // 匹配所有以 '/api' ...
Python django解决跨域请求的问题
解决方案 1.安装django-cors-headers pip3 install django-cors-headers 2.配置settings.py文件 INSTALLED_APPS = [.. ...
Python 25 Django跨域请求
一.jsonp方式浏览器的同源策略会阻止ajaxa请求,但不阻止src. jsonp方式其实是利用了<script>标签可以直接跨域的性质,在body中生成一个<script> ...
springboot + vue项目跨域请求解决方案
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 以下是跨域解决方案服务端添加一个拦截器即可 @Compon ...
vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...

python vue+flask 跨域请求

python vue+flask 跨域请求相关推荐

最新文章

热门文章