Flask 跨域问题

一、什么是跨域

跨域是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，然后在Js中通过Ajax访问C服务器的静态资源或请求。即：浏览器A从B服务器拿的资源，资源中想访问服务器C的资源。

同源策略是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，为了用户安全，浏览器加了限制，其中的Js通过Ajax只能访问B服务器的静态资源或请求。即：浏览器A从哪拿的资源，那资源中就只能访问哪。

同源是指：同一个请求协议(如：Http或Https)、同一个Ip、同一个端口，3个全部相同，即为同源。

跨域的处理

W3C组织制定了一个Cross-Origin Resource Sharing规范，简写为Cors，现在这个规范已经被大多数浏览器支持，Cors 专门用来处理跨域的需求。

Cors需要在后端应用进行配置，因此，是一种跨域的后端处理方式，这么做也容易理解，一个你不认识的源来访问你的应用，自然需要应用进行授权。除了后端处理方式，也有前端的解决方案，如：JSONP，这里我们主要讲解Flask后端配置方案.

跨域的分类

跨域分为以下3种

名称	英文名	说明
简单请求	Simple Request	发起的Http请求符合： 1.无自定义请求头，只有Accept、Accept-Language、Content-Language、Last-Event-ID 2.请求动词为GET、HEAD或POST之一 3.动词为POST时，Content-Type是application/x-www-form-urlencoded，multipart/form-data或text/plain之一
复杂请求	Preflighted Request	发起的Http请求符合其中之一： 1.包含了自定义请求头 2.请求动词不是GET、HEAD或POST 3.动词是POST时， Content-Type不是application/x-www-form-urlencoded，multipart/form-data或text/plain。 即：简单请求的相反
凭证请求	Requests with Credential	发起的Http请求中带有凭证

简单请求

简单请求的发送从代码上来看和普通的XHR没太大区别，但是HTTP头当中要求总是包含一个域（Origin）的信息。该域包含协议名、地址以及一个可选的端口。不过这一项实际上由浏览器代为发送，并不是开发者代码可以触及到的。

简单请求的部分响应头如下：

1. Access-Control-Allow-Origin（必含）。不填，请求按失败处理。该项控制数据的可见范围，如果希望数据对任何人都可见，可以填写"*"。
2. Access-Control-Allow-Credentials（可选）。该项标志着请求当中是否包含cookies信息，只有一个可选值：true（必为小写）。如果不包含cookies，请略去该项，而不是填写false。这一项与XmlHttpRequest2对象当中的withCredentials属性应保持一致，即withCredentials为true时该项也为true；withCredentials为false时，省略该项不写。反之则导致请求失败。
3. Access-Control-Expose-Headers（可选） – 该项确定XmlHttpRequest2对象当中getResponseHeader()方法所能获得的额外信息。通常情况下，getResponseHeader()方法只能获得如下的信息：（当你需要访问额外的信息时，就需要在这一项当中填写并以逗号进行分隔）
   1. Cache-Control
   2. Content-Language
   3. Content-Type
   4. Expires
   5. Last-Modified
   6. Pragma

如果仅仅是简单请求，那么即便不用CORS也没有什么大不了，但CORS的复杂请求就令CORS显得更加有用了。简单来说，任何不满足上述简单请求要求的请求，都属于复杂请求。比如说你需要发送PUT、DELETE等HTTP动作，或者发送Content-Type: application/json的内容。

复杂请求

复杂请求先发送一种"预请求"，此时作为服务端，也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。预请求以OPTIONS形式发送，当中同样包含域，并且还包含了两项CORS特有的内容：

1. Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
2. Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。

显而易见，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。复杂请求的部分响应头及解释如下：

1. Access-Control-Allow-Origin（必含） – 和简单请求一样的，必须包含一个域。
2. Access-Control-Allow-Methods（必含） – 这是对预请求当中Access-Control-Request-Method的回复，这一回复将是一个以逗号分隔的列表。尽管客户端或许只请求某一方法，但服务端仍然可以返回所有允许的方法，以便客户端将其缓存。
3. Access-Control-Allow-Headers（当预请求中包含Access-Control-Request-Headers时必须包含） – 这是对预请求当中Access-Control-Request-Headers的回复，和上面一样是以逗号分隔的列表，可以返回所有支持的头部。这里在实际使用中有遇到，所有支持的头部一时可能不能完全写出来，而又不想在这一层做过多的判断，没关系，事实上通过request的header可以直接取到Access-Control-Request-Headers，直接把对应的value设置到Access-Control-Allow-Headers即可。
4. Access-Control-Allow-Credentials（可选） – 和简单请求当中作用相同。
5. Access-Control-Max-Age（可选） – 以秒为单位的缓存时间。预请求的的发送并非免费午餐，允许时应当尽可能缓存。

一旦预回应如期而至，所请求的权限也都已满足，则实际请求开始发送。

目前大部分Modern浏览器已经支持完整的CORS，但IE直到IE11才完美支持，所以对于PC网站，还是建议采用其他解决方案，如果仅仅是移动端网站，大可放心使用。

Flask配置跨域

flask 配置cors 有两种方式，一种使用自带的cors，一种自定义返回头

第一种，自定义返回头

@app.after_request
def af_request(resp):     
    """
     #请求钩子，在所有的请求发生后执行，加入headers。
    :param resp:
    :return:
    """
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = '*'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return resp

第二种，使用cors

Flask配Cors跨域，使用Flask-CORS包，详细文档，参见: https://flask-cors.readthedocs.io/en/latest/

flask-cors 也提供了两种方式：

方式	范围	说明
@cross_origin装饰器	配置单个路由	适用于配置特定的API接口
CORS函数	配置全局API接口	适用于全局的API接口配置

安装flask-cors

pip install flask-cors

第一种：使用@cross_origin装饰器

@app.route("/")
@cross_origin()
def helloWorld():
  return "Hello, cross-origin-world!"

CORS参数说明 

装饰器参数	类型	Head字段	说明
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	预检请求的有效时长

第二种：使用CORS函数

#################### 应用全局配置 ####################
from flask_cors import *


app = Flask(__name__)
CORS(app, supports_credentials=True, resources=r"/*")

@app.route("/api/v1/users")
def list_users():
  return "user example"


#################### 单独Blueprints配置 ####################
api_v1 = Blueprint('API_v1', __name__)
CORS(api_v1) 

@api_v1.route("/api/v1/users/")
def list_users():
  return "user example"

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	预检请求的有效时长

注意：继承Resource类来写的RESTful-API接口

继承Resource类来写的RESTful-API接口不能使用上述办法。解决办法是在需要支持跨域请求的API类下，添加一个类方法options，就可以解决跨域问题

原因是跨域问题请求的时候,无论是POST请求还是PUT请求,前端都会优先发起一个OPTIONS请求确认请求允许范围.那么在解决跨域请求时,只需要在每个资源url中加入options请求方式,并返回适当的响应头信息就能解决跨域问题.

class YourAPI(Resource):
    def options(self):
        return {'Allow': '*'}, 200, {'Access-Control-Allow-Origin': '*',
                                     'Access-Control-Allow-Methods': 'HEAD, OPTIONS, GET, POST, DELETE, PUT',
                                     'Access-Control-Allow-Headers': 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild',
                                     }

具体可配置参数解释:

• Access-Control-Allow-Origin
  这个头部信息由服务器返回，用来明确指定那些客户端的域名允许访问这个资源。它的值可以是：

  -使用" * " —— 允许任意域名

  • 一个完整的域名名字（比如：https://example.com）

  如果你需要客户端传递验证信息到头部（比如：cookies）。这个值不能为 * —— 必须为完整的域名（这点很重要）。

• Access-Control-Allow-Credentials
  这个头部信息只会在服务器支持通过cookies传递验证信息的返回数据里。它的值只有一个就是 true。跨站点带验证信息时，服务器必须要争取设置这个值，服务器才能获取到用户的cookie。

• Access-Control-Allow-Headers
  提供一个逗号分隔的列表表示服务器支持的请求数据类型。假如你使用自定义头部(比如：x-authentication-token 服务器需要在返回OPTIONS请求时，要把这个值放到这个头部里，否则请求会被阻止)。

• Access-Control-Expose-Headers
  相似的，这个返回信息里包含了一组头部信息，这些信息表示那些客户端可以使用。其他没有在里面的头部信息将会被限制（译者注：这个头信息实战中使用较少）。

• Access-Control-Allow-Methods
  一个逗号分隔的列表，表明服务器支持的请求类型（比如：GET, POST）

• Origin
  这个头部信息，属于请求数据的一部分。这个值表明这个请求是从浏览器打开的哪个域名下发出的。出于安全原因，浏览器不允许你修改这个值。