解决Flask跨域问题的几种方式
跨域 解决 方式 几种 Flask 问题
2023-09-27 14:20:14 时间
本文收录于《Python开发》专栏,此专栏聚焦于Python开发中的编程技巧和总结,将持续更新,欢迎大家订阅!
个人主页:有梦想的程序星空
个人介绍:小编是人工智能领域硕士,全栈工程师,深耕Flask后端开发、数据挖掘、NLP、Android开发、自动化等领域,有较丰富的软件系统、人工智能算法服务的研究和开发经验。
如果文章对你有帮助,欢迎
关注
、点赞
、收藏
、订阅。
1、什么是跨域问题
跨域是因为出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。
跨域问题就是当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同时出现的问题。
2、问题描述
当客户端向服务器端请求ajax服务时,如果客户端和服务器端域名不一致,就会出现跨域问题,ajax报错如下:
No 'Access-Control-Allow-Origin' header is present on the requested 。
3、解决方式:
(1)安装flask_cors:
pip install flask_cors
app初始化的时候就加载配置,如下
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
# r'/*' 是通配符,让本服务器所有的 URL 都允许跨域请求
CORS(app, resources=r'/*')
if __name__ == "__main__":
app.run()
CORS参数说明
参数 | 类型 | Head字段 | 说明 |
---|---|---|---|
resources | 字典、迭代器或字符串 | 无 | 全局配置允许跨域的API接口 |
origins | 列表、字符串或正则表达式 | Access-Control-Allow-Origin | 配置允许跨域访问的源,* 表示全部允许 |
methods | 列表、字符串 | Access-Control-Allow-Methods | 配置跨域支持的请求方式, 如:GET、POST |
expose_headers | 列表、字符串 | Access-Control-Expose-Headers | 自定义请求响应的Head信息 |
allow_headers | 列表、字符串或正则表达式 | Access-Control-Request-Headers | 配置允许跨域的请求头 |
supports_credentials | 布尔值 | Access-Control-Allow-Credentials | 是否允许请求发送cookie, false是不允许 |
max_age | 整数、字符串 | Access-Control-Max-Age | 预检请求的有效时长 |
:param resources:
The series of regular expression and (optionally) associated CORS
options to be applied to the given resource path.
If the argument is a dictionary, it's keys must be regular expressions,
and the values must be a dictionary of kwargs, identical to the kwargs
of this function.
If the argument is a list, it is expected to be a list of regular
expressions, for which the app-wide configured options are applied.
If the argument is a string, it is expected to be a regular expression
for which the app-wide configured options are applied.
Default : Match all and apply app-level configuration
:type resources: dict, iterable or string
:param origins:
The origin, or list of origins to allow requests from.
The origin(s) may be regular expressions, case-sensitive strings,
or else an asterisk
Default : '*'
:type origins: list, string or regex
:param methods:
The method or list of methods which the allowed origins are allowed to
access for non-simple requests.
Default : [GET, HEAD, POST, OPTIONS, PUT, PATCH, DELETE]
:type methods: list or string
:param expose_headers:
The header or list which are safe to expose to the API of a CORS API
specification.
Default : None
:type expose_headers: list or string
:param allow_headers:
The header or list of header field names which can be used when this
resource is accessed by allowed origins. The header(s) may be regular
expressions, case-sensitive strings, or else an asterisk.
Default : '*', allow all headers
:type allow_headers: list, string or regex
:param supports_credentials:
Allows users to make authenticated requests. If true, injects the
`Access-Control-Allow-Credentials` header in responses. This allows
cookies and credentials to be submitted across domains.
:note: This option cannot be used in conjuction with a '*' origin
Default : False
:type supports_credentials: bool
:param max_age:
The maximum time for which this CORS request maybe cached. This value
is set as the `Access-Control-Max-Age` header.
Default : None
:type max_age: timedelta, integer, string or None
:param send_wildcard: If True, and the origins parameter is `*`, a wildcard
`Access-Control-Allow-Origin` header is sent, rather than the
request's `Origin` header.
Default : False
:type send_wildcard: bool
:param vary_header:
If True, the header Vary: Origin will be returned as per the W3
implementation guidelines.
Setting this header when the `Access-Control-Allow-Origin` is
dynamically generated (e.g. when there is more than one allowed
origin, and an Origin than '*' is returned) informs CDNs and other
caches that the CORS headers are dynamic, and cannot be cached.
If False, the Vary header will never be injected or altered.
Default : True
:type vary_header: bool
(2)在被请求的Response header中加入header
@app.after_request
def func_res(resp):
res = make_response(resp)
res.headers['Access-Control-Allow-Origin'] = '*'
res.headers['Access-Control-Allow-Methods'] = 'GET,POST'
res.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
return res
(3)改成jsonp格式(不推荐)
在ajax请求里将数据类型改成jsonp,但是在返回数据的时候需要一个回调函数读取,而且jsonp只支持get方式,即使使用post方式,在调用的时候也会变成get方式,这带来安全性上的问题,并不推荐。
$.ajax({
type:'POST',
url:'127.0.0.1:5000',
data:data,
dataType:'jsonp',//改成了jsonp格式,解决了跨域访问的问题
success:function(data){
console.log(data)
}
关注微信公众号【有梦想的程序星空】,了解软件系统和人工智能算法领域的前沿知识,让我们一起学习、一起进步吧!
相关文章
- js 跨域
- 解决ajax跨域问题
- 你不知道的JavaScript--Item33 跨域总结与解决的方法
- 跨域问题解决
- 华为数通笔记-MPLS BGP跨域optionB
- React axios 使用 http-proxy-middleware 解决跨域问题小记
- chrome 非安全模式解决开发跨域问题
- 跨域 & Jsonp【详细】
- SenCha Touch AJAX跨域
- 前端解决跨域问题的常见方法及优缺点对比
- js通过全路径下载文件及跨域下载图片
- vue中的跨域问题
- 『需求优化』使用 postMessage 解决 localStorage 跨域问题
- SpringBoot配置CORS处理前后端分离的跨域问题
- web项目中的跨域问题解决方法
- Java学习-064-Springboot 解决跨域访问简单配置示例
- vite通过proxy解决跨域问题
- ThinkPHP 5 中AJAX跨域请求头设置方法
- [转]完全跨域的单点登录
- 解决SpringBoot跨域的三种方式
- java 服务端解决ajax跨域问题
- Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
- Taurus.MVC 2.2 开源发布:WebAPI 功能增强(请求跨域及Json转换)
- kindeditor4跨域上传图片解决
- nginx解决跨域问题
- WebAPI实现跨域请求
- 真正实现前后端分离架构,通过SpringBoot整合Jpa做构建后端服务器,前端通过Vue结合Element-UI和axios进行数据请求,解决了跨域请求问题、用户登录验证、百度地图根据坐标标记
- uniapp:h5端解决跨域问题
- SpringBoot解决全局和局部跨域问题的两种方式
- 解决Vue前后端跨域问题的多种方式