Flask， Access-Control-Allow-Origin 跨域请求的解决方法

1、问题描述

由于浏览器受同源策略的限制，在使用 XMLHttpRequest 对象进行跨域请求时，通常会报 No ‘Access-Control-Allow-Origin’ header is present on the requested resource 错误，导致请求失败。

2、解决思路

解决该问题的基本思路是使用 CORS(Cross-Origin Resource Sharing) 或 JSONP ，具体到 Flask 场景R，方法如下。

3、跨域的具体实现

（1）导入flask_cors 模块

pip install flask_cors

（2）配置代码如下

伪代码 ：

from flask import Flask## 1、导入flask_cors 模块 ，pip install flask_cors
from flask_cors import CORSapp = Flask(__name__)
app.config['JSON_AS_ASCII'] = False@app.route('/',methods=['GET', 'POST','OPTIONS'])
def  hello(resp):data ={"status":200,"message":'查询成功',"list":[{"name":"张三",},{"name": "李四",},{"name": "wangwu",}]}json_str = json.dumps(data, ensure_ascii=False)resp = make_response(json_str)# 2、headers 中进行设置resp.headers["Content-Type"] = "application/json;chartset=UTF-8"  # 设置响应头resp.headers['Access-Control-Allow-Origin'] = '*'resp.headers['Access-Control-Allow-Methods'] = 'GET,POST,OPTIONS' # 如果有其它方法（delete,put等），断续添加resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'return respif __name__ == '__main__':    app.run(debug=True)## 3、调用 CORS CORS(app)

完整代码如下：

import json
from flask import Flask,make_response,request, url_for, redirect, render_template## 1、导入flask_cors 模块 ，pip install flask_cors
from flask_cors import CORSapp = Flask(__name__)  # 在当前文件下创建应用
app.config['JSON_AS_ASCII'] = False@app.route('/',methods=['GET', 'POST','OPTIONS'])
def hello():data ={"status":200,"message":'查询成功',"list":[{"name":"张三",},{"name": "李四",},{"name": "wangwu",}]}json_str = json.dumps(data, ensure_ascii=False)resp = make_response(json_str)# 2、headers 中进行设置resp.headers["Content-Type"] = "application/json;chartset=UTF-8"  # 设置响应头resp.headers['Access-Control-Allow-Origin'] = '*'resp.headers['Access-Control-Allow-Methods'] = 'GET,POST,OPTIONS'  # 如果有其它方法（delete,put等），断续添加resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'return respif __name__ == '__main__':app.run(debug=True)## 3、调用 CORSCORS(app)

Flask， Access-Control-Allow-Origin 跨域请求的解决方法相关推荐

Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法参考文章: (1)Thinkphp5.1允许uni-app的H5跨域请求接口解决方法 (2)https://www.cnblogs. ...
jQuery ajax跨域请求的解决方法
jQuery ajax跨域请求的解决方法参考文章: (1)jQuery ajax跨域请求的解决方法 (2)https://www.cnblogs.com/freeweb/p/4908832.html ...
什么是跨域及跨域请求资源的方法？
1.由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. 2.跨域请求资源的方法: (1).porxy代理(反向服务器代理) 首先将用户发送的请求发送给中 ...
什么是跨域？跨域请求资源的方法有哪些？
1.什么是跨域? 由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域.存在跨域的情况: 网络协议不同,如http协议访问https协议. 端口不同,如80 ...
跨域以及一些解决方法
跨域最近在回顾一些知识,归纳一下以前的笔记再结合各个资料说一下我对跨域和跨域问题的解决方法. 产生跨域安全问题不是后台服务器不允许前台调用, 其本质是浏览器的同源策略(Same-origin pol ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
vue-socket.io跨域问题的解决方法
vue-socket.io跨域问题的解决方法参考文章: (1)vue-socket.io跨域问题的解决方法 (2)https://www.cnblogs.com/zhengze/p/12294916 ...
react+spring 记录跨域问题的解决方法
react+spring 记录跨域问题的解决方法参考文章: (1)react+spring 记录跨域问题的解决方法 (2)https://www.cnblogs.com/cq-jiang/p/954 ...
.Net 站点跨域问题及解决方法
.Net 站点跨域问题及解决方法参考文章: (1).Net 站点跨域问题及解决方法 (2)https://www.cnblogs.com/GreenLeaves/p/9931446.html 备忘一 ...

Flask， Access-Control-Allow-Origin 跨域请求的解决方法

1、问题描述

2、解决思路

3、跨域的具体实现

Flask， Access-Control-Allow-Origin 跨域请求的解决方法相关推荐

最新文章

热门文章