解决Flask跨域问题的几种方式
本文收录于《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_corsapp初始化的时候就加载配置，如下
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)
}关注微信公众号【有梦想的程序星空】，了解软件系统和人工智能算法领域的前沿知识，让我们一起学习、一起进步吧！