Flask解决跨域问题

拼搏现实的明天。 2023-01-19 14:55 174阅读 0赞

Flask解决跨域问题

什么是跨域问题

最近在做一个前后端分离的项目时，需要前端向后端发起请求然后得到数据，却始终拿不到后端返回的数据，但是通过浏览器直接访问这个接口是可以得到返回的数据。这让我百思不得其解，最后通过看报错得到了如下信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70][]

通过百度知道这是因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。而在实际开发中，前后端常常是相互分离的，并且前后端的项目部署也常常不在一个服务器内或者在一个服务器的不同端口下。前端想要获取后端的数据，就必须发起请求，如果不做一些处理，就会受到浏览器同源策略的约束。后端可以收到请求并返回数据，但是前端无法收到数据。

解决办法

**方案1 使用make\_response**

具体代码如下

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> from flask import Flask, request, jsonify, make_response app=Flask(__name__) @app.route('/') def index(): &nbsp;&nbsp;&nbsp; user_count = User.query.count() &nbsp;&nbsp;&nbsp; data = request.args.to_dict() &nbsp;&nbsp;&nbsp; user_list = User.query.order_by( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; User.id.asc() &nbsp;&nbsp;&nbsp; ).paginate(page=int(data.get('page')),per_page=int(data.get('limit'))) &nbsp;&nbsp;&nbsp; res = make_response(jsonify( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {"code":0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "msg":'', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "count":user_count, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "data":[{"id":user.id,"username":user.username,"password":user.password} for user in user_list.items] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; )) &nbsp;&nbsp;&nbsp; res.headers['Access-Control-Allow-Origin'] = '*' &nbsp;&nbsp;&nbsp; res.headers['Access-Control-Allow-Method'] = '*' &nbsp;&nbsp;&nbsp; res.headers['Access-Control-Allow-Headers'] = '*' &nbsp;&nbsp;&nbsp; return res </td> 
 </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 1][]  
    前端能够接收到返回的内容

**方案2 使用CROS**

首先安装flask\_cors这个包 pip install flask\_cors

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> from flask_cors import * app = Flask(__name__) CORS(app, supports_credentials=True) &nbsp; @app.route('/') def index(): &nbsp;&nbsp;&nbsp; user_count = User.query.count() &nbsp;&nbsp;&nbsp; data = request.args.to_dict() &nbsp;&nbsp;&nbsp; user_list = User.query.order_by( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; User.id.asc() &nbsp;&nbsp;&nbsp; ).paginate(page=int(data.get('page')),per_page=int(data.get('limit'))) &nbsp;&nbsp;&nbsp; return jsonify( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {"code":0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "msg":'', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "count":user_count, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "data":[{"id":user.id,"username":user.username,"password":user.password} for user in user_list.items] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; ) </td> 
 </tr> 
 </tbody> 
</table>

总结

之所以浏览器要制定同源策略，其中一个重要的原因就是对cookie的保护。Cookie中存着sessionid，如果黑客获取了sessionid，在有效的时间内就能登录我们的账号。当我们访问了一个恶意网站 如果没有同源策略 那么这个网站就能通过js 访问document.cookie 得到用户关于的各个网站的sessionID 其中可能有银行网站等等。

虽然有同源策略，但是不是说就绝对安全，只能说是提高了一点攻击的成本。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70]: /images/20221021/aefae12eed34434b89daff5125fa14eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 1]: /images/20221021/01352d62144e45d190e3965ed1380c66.png