Flask——跨域问题解决

背景：最近在使用Flak-restful+Vue来做一个app，将Vue打包在了一个安卓的壳子里面。但是这期间出现了一个比较有意思的问题——跨域。做后端开发的兄弟应该在前后端的分离项目中应该对这个问题司空见惯了。但是这个问题还是有一定的讨论意义，所以还是拿出来说一下。

1.CORS

　　这个组件在很多框架的跨域问题使用中都用的到，比如django里面自带了这个中间件，需要的朋友可以百度一下，用起来很方便。flask使用的时候代码如下。

　　首先得安装这个包，在flask中是没有自带的。

pip install flask_cors

　　之后代码中使用如下：

1 from flask_cors import CORS
2
3 app = Flask(__name__)
4 CORS(app, supports_credentials=True)
5
6 if __name__ == "__main__":
7     app.run()

　　当然了，如果不使用Flak-restful的话可以写一个中间件，对响应头进行操作，在这里就不进行过多描述了。

2.JSONP

　　很多人在django restful-framework-api中习惯了使用jsonp的，但是flask自带的jsonify这个东西对于跨域而言好像并没有什么作用，因此这条路可以别想了。

3.配置options请求

　　***先说明这种方式是要和方法1一起使用的***

　　众所周知在处理跨域的时候会先发一个options请求给服务端，这个请求可以说是一个“预请求”吧，用于探测后续真正需要发起的跨域 POST、PUT、PATCH 请求对于服务器来说是否是安全可接受的，因为跨域提交数据对于服务器来说可能存在很大的安全问题。

　　所以在这里必须设置一下options请求来解决跨域问题。

1 class TabrResource(Resource):
2
3     def options(self):
4         return {'Allow': '*'}, 200, \
5                {'Access-Control-Allow-Origin': '*',
6                 'Access-Control-Allow-Methods': 'HEAD, OPTIONS, GET, POST, DELETE, PUT',
7                 'Access-Control-Allow-Headers':
8                     'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild',
9                 }

　　这里我写了一个类，继承了Resource这个类，之后重写了options方法。通过接口的类继承TabrResource，所有的接口的类都会有一个options方法，来应对跨域请求。这个亲测有效。

*最后的最后说明一下，在Vue编译到安卓程序里面以后相当于是安卓程序里面嵌入了一个浏览器。可以配置一下把所有的跨域请求全部不拦截，直接放行。

转载于:https://www.cnblogs.com/XiaoBoya/p/11295284.html

Flak——跨域问题解决相关推荐

ssm把图片保存到项目中_项目中的图片跨域问题解决方式
现象首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ...
Tomcat中的字体请求跨域问题解决
Tomcat中的字体请求跨域问题解决原作者地址: https://blog.csdn.net/u011974399/article/details/79990505 修改tomcat的web.xml ...
django-vue-admin前端设置后台接口地址为127.0.0.1产生跨域问题解决办法
django-vue-admin前端设置后台接口地址为127.0.0.1产生跨域问题解决办法: 不能设置成127.0.0.1,设置成节点的ip地址即可解决. 应该是脚手架本身存在问题导致的.
ajax跨域问题解决(spring boot)
ajax跨域问题解决(spring boot) 参考文章: (1)ajax跨域问题解决(spring boot) (2)https://www.cnblogs.com/cosyer/p/6589874 ...
vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
WebSocket跨域问题解决
WebSocket跨域问题解决参考文章: (1)WebSocket跨域问题解决 (2)https://www.cnblogs.com/goeasycloud/p/9389360.html 备忘一下.
前后端分离框架跨域问题解决
1. 跨域问题的产生前端向后台请求,但是后台与前台不是同一个域中(域名,端口,协议任一不同就不是同一个域),那么就会产生跨域问题. 2.跨域问题解决 2.1 传统的项目那么可以直接在Filter过滤 ...
Vue 跨域问题解决
Vue 跨域问题解决 vue框架目录: ProxyTable pathRewrite:是使用proxy进行代理时,对请求路径进行重定向以匹配到正确的请求地址,其中^是正则中限定开头,则是/api为开头 ...
小程序适配H5端跨域问题解决
小程序本身自带有解决跨域的方法,但是当小程序运行到浏览器的时候,由于写小程序的时候并没有处理跨域,所以H5端做相同的axios请求,小程序没有报错,H5端却会报错解决方法: 我们需要到manifes ...

Flak——跨域问题解决