解决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_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参数说明

: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)
        }

关注微信公众号【有梦想的程序星空】，了解软件系统和人工智能算法领域的前沿知识，让我们一起学习、一起进步吧！